Question

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

这是视图。

<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”中。用户可能只有两个项目，但我想显示所有项目，然后在找到匹配项时向输入中添加“活动”类或“选定”参数。

我该怎么做？在发送对象之前，我会在控制器功能中以某种方式比较它们吗？

谢谢！

Answer 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的成员，如果active则设置true类。

这里是Working Fiddle

比较两个具有ng-repeat的对象以设置活动类

1 个答案: