javascript - 比较两个数组并使用 ng-style 标记数组中的相等条目

Question

我有一个列表，显示来自数据库的单词查询，从那里我可以单击一个单词，它会被推送到我可以保存的另一个列表。有了这个我可以创建不同的单词列表。我想做的是，如果我已经将这些词推到我的新列表中，则为它们提供另一种颜色。

为此，我使用 Controller 中的一个函数来比较两个列表和 angular.foreach。如果 wordFromQuery._id === wordOnNewList._id 我用 ng-style 为单词提供了另一种背景颜色。

这是我的代码:

查看

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

我迭代单词查询(searchWords)并使用addWordtoSet(word)将它们推送到我的另一个数组(这非常有效)。 isInside(word) 将执行 angular.foreach 来比较两个数组，并且 ng-style 应该根据 isInside 函数的 if 语句提供不同的样式。

Controller

    $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 。我在这里做错了什么明显的错误吗？

我希望得到提示或提示。谢谢!

更新

它与 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

您可以将颜色分配给同一函数内的变量，并在 View 中使用它。

$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}" }"