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

Question

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

为此，我在我的控制器中使用了一个函数来将两个列表与 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 来比较两个数组，根据 isInside 函数的 if 语句，ng-style 应该提供不同的样式。

控制器

    $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

尝试

$scope.choosenWords.value = 'exist';

同时在控制器启动时初始化 choosenWords。

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

控制器是通过partial初始化的吗？

Answer 2

您可以在同一函数内将 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}" }"

Answer 3

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

在控制器中我们使用了以下函数：

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

它使用 foreach 比较数组，如果有匹配的 ID，则找到 bool returns true。

在视图中我们使用了以下内容：

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

使用标记或未标记的 css class，在我的例子中，将匹配的单词着色为绿色（标记）。所有其他单词的背景颜色都变白了。

这里是 CSS:

.marked {
  background: $lightgreen;
}

.unmarked {
  background: $nicewhite;
}

在我的例子中，我使用 scss 和颜色变量，但是你当然可以使用所有其他颜色，比如红色；或#fff。其结果是两个数组，它们是视图。第一个是来自数据库的搜索查询，它显示所有单词。第二个是一个新数组，您可以在其中通过单击其中一个单词来推送单词。如果你这样做的话，这个词会被推送并且它会变成绿色背景。就是这样，我希望这是个好消息。

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

Compare two arrays and using ng-style to mark equal entries in the arrays

javascript

arrays

angularjs

ng-class

ng-style