使用 ng-repeat 比较两个对象以设置活动类答案

【问题标题】：Compare two objects with ng-repeat to set an active class使用 ng-repeat 比较两个对象以设置活动类
【发布时间】：2018-10-13 09:55:17
【问题描述】：

我正在尝试为用户项目列表设置一个活动类。

这是视图。

<div ng-controller="ItemController as vm">
    <ul>
        <li class="item" ng-repeat="x in vm.items">
              <input type="checkbox">
              <span class="check_title">{{x.item_name}}</span>
        </li>
    </ul>
</div>

“vm.user_items”被发送到视图。

“vm.items”也被发送到视图。

所有值都在“vm.items”中。用户可能只有两个项目，但我想显示所有项目，然后在找到匹配项时向输入添加“活动”类或“选定”参数。

我该怎么做？在将对象发送给控制器之前，我是否以某种方式在控制器函数中比较它们？

谢谢！

【问题讨论】：

所以您需要找到vm.user_items 和vm.items 之间的交集，然后在视图中突出显示它们，对吗？我确信在标记中有一种方法可以做到这一点，但它会有点低效和笨拙，所以我强烈建议在控制器中这样做。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

上下文

您没有向我们展示vm.user_items 是如何定义的，所以我假设它是对vm.items 对象的引用数组，而不是ID 查找或硬编码的重复克隆。（如果不是，答案会有所改变。）所以假设你的数据是这样的：

vm.items = [
    {id: 1, item_name: "Item #1"},
    {id: 2, item_name: "Item #2"},
    {id: 3, item_name: "Item #3"},
    {id: 4, item_name: "Item #4"},
    {id: 5, item_name: "Item #5"},
];

vm.user_items = [
    vm.items[2],
    vm.items[4]
];

解决方案

您可以使用ng-class 设置类。您可以根据控制器值设置类属性，例如：

<input type="checkbox" ng-class="{active: vm.user_items.indexOf(x) != -1}">

此代码检查当前vm.items 迭代（x）是否是vm.user_items 的成员，如果true 则设置active 类。

这是Working Fiddle

【讨论】：