比较两个数组，并使用ng样式在数组中标记相同的条目

Question

我有一个列表，显示从一个分贝的单词查询，从那里我可以点击一个单词，它被推到另一个列表，我可以保存比。有了这个，我可以创建不同的词汇表。我想要做的是给这些单词另一种颜色，如果我已经把它们推到我的新名单上。

为此，我使用我的控制器中的函数来比较两个列表与angular.foreach。如果wordFromQuery._id === wordOnNewList._id我给了单词另一个背景颜色与ng样式。

这里是我的代码：

查看

ng-repeat="word in searchWords" ng-click="addWordToSet(word)" ng-class="isInside(word)" ng-style="{ background: choosenWords.value == 'exist' ? 'lightgreen' : 'white' }" 

我遍历词的查询（searchWords），并与addWordtoSet（字）我把它们推到我的其他阵列（这伟大工程） 。根据isInside函数的if语句，isInside（word）将执行angular.foreach来比较两个数组，并且ng样式应该提供不同的样式。

控制器

$scope.isInside = function (word) { 
     angular.forEach($scope.currentWordlist, function (item) { 
     if (item._id === word._id) { 
      $scope.choosenWords = {value: 'exist'}; 
     } else { 
      $scope.choosenWords = {value: 'notOnList'}; 
     } 
     }); 
    }; 

的angular.forEach比较从两个阵列词语的currentWordList是我用addWordToSet推送的数组

会发生什么情况是，searchword数组上的一个单词获取绿色（以及+1的集合，因此如果arraypos。0中的单词恰好是arraypos 。1获得绿色）。

我怀疑我用ng-class元素做了所有的错误，但我没有找到另一个很好的机会来获得word._id的另一种方式。我在这里做了明显错误的事吗？

我会感激提示或提示。谢谢！

UPDATE

它的工作原理与addWordToSet功能相当精致：

 $scope.addWordToSet = function (word) { 
     var exists = false; 
     angular.forEach($scope.currentWordlist, function (item) { 
      if (item._id === word._id) { 
      exists = true; 
     } 
     }); 
     if (exists === false) { 
      $scope.currentWordlist.push(word); 
     } 
     }; 

我唯一需要的，我认为是不这样做的点击，但没有立即点击任何东西。是my ng-class="isInside(word)"的正确选择吗？

Answer 1

我和一个朋友坐在一起，我们想出了这个问题的一个工作版本，所以这里是万一有人解决方案也有类似的问题和手。

在Controller我们使用了以下功能：

$scope.isSelected = function (word) { 
     var found = false; 
     angular.forEach($scope.currentWordlist, function (item) { 
     if (item._id === word._id) { 
      found = true; 
     } 
     }); 
    return found; 
    }; 

它使用的foreach比较阵列，如果有IDS是一个匹配的发现布尔返回true。

在查看我们使用了以下内容：

ng-class="isSelected(word) ? 'marked' : 'unmarked'" 

它使用标记或无标记的CSS类，在我的情况，着色为绿色匹配的单词（标记）。所有其他的词都是背景色为白色。

这里是CSS：

.marked { 
    background: $lightgreen; 
} 

.unmarked { 
    background: $nicewhite; 
} 

在我来说，我使用SCSS和colorvariables，但你当然可以使用所有其他的颜色，如红色;或#fff。这个结果是两个数组是视图。第一个是来自DB的搜索查询，显示所有单词。第二个是一个新的数组，您可以通过单击其中一个单词来推动单词。如果你这样做，这个词被推动，并获得绿色背景。那就是它，我希望这是很好的信息。

Answer 2

尝试

$scope.choosenWords.value = 'exist'; 

在控制器的启动也初始化choosenWords。

如果这不起作用，请检查ng模块执行的优先顺序。

控制器是否通过局部初始化？

Answer 3

您可以将同一个函数中的color分配给variable并在视图中使用它。

$scope.isInside = function (word) { 
    angular.forEach($scope.currentWordlist, function (item) { 
    if (item._id === word._id) { 
     $scope.choosenWords = {value: 'exist'}; 
     $scope.color = 'lightgreen' 
    } else { 
     $scope.choosenWords = {value: 'notOnList'}; 
     $scope.color = 'white' 
    } 
    }); 
}; 

ng-style="{'background-color':color}"

查看：

ng-repeat="word in searchWords" ng-click="addWordToSet(word)" ng-class="isInside(word)" ng-style="{'background-color':color}" }"