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

【问题标题】：Compare two arrays and using ng-style to mark equal entries in the arrays比较两个数组并使用 ng-style 标记数组中的相等条目
【发布时间】：2016-11-29 18:07:16
【问题描述】：

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

为此，我在控制器中使用一个函数将两个列表与 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 元素上做错了，但我没有找到另一个很好的机会来获得这个词。_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)" 是正确的选择吗？

【问题讨论】：

标签： javascript angularjs arrays ng-class ng-style

【解决方案1】：

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

【讨论】：

听起来很不错。我自己也有这个方向的想法，但没有成功。您的解决方案是绝对有道理的，但不知何故只有一个词是绿色的，而且它始终是我单击 + 1 的词，所以我认为如果这里有任何问题，我需要检查我的查询。
你现在遇到了什么问题？
它只显示了在前端标记的错误单词，我将在最后提供一个答案
是的，但我想出了另一个非常好的工作版本，我把它贴在最后作为答案。但是谢谢你的信息。有了您的信息，我可以通过对其进行一些更改并进行测试来解决它。非常感谢！

【解决方案2】：

试试

$scope.choosenWords.value = 'exist';

还要在控制器的开头初始化choosenWords。

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

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

【讨论】：

如果我在没有对象的情况下使用 choosenWords，我会得到 TypeErrors 值未设置。 “通过部分初始化”是什么意思，我如何检查 ng 模块的优先级顺序？
我相信不久前将控制器设置为部分的一部分时存在一个错误，那是离子之前...优先级用于在编译指令之前对指令进行排序检查角度文档.. .
嵌套模板称为部分模板

【解决方案3】：

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

在Controller中我们使用了以下函数：

    $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 返回 true。

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

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

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

这里是 CSS：

.marked {
  background: $lightgreen;
}

.unmarked {
  background: $nicewhite;
}

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

【讨论】：