Question

我正在尝试将一个类应用于分页列表中的项目，因为我只是模拟指令链接属性中元素的单击：

link : function (scope, element, attrs) {
        element.bind('click', function () {
        element.addClass("blue");
            });

}

这很好用，但我遇到的问题是，当我从第一页移动到第二页时，我放松了我应用于第一页上的项目的类。我如何能够保留我之前申请的所有课程。

谢谢。

A plunker to better understand

Answer 1

您应该将更改存储在数据中，而不是存储在指令中的元素中。

$scope.items = [
  {id: 51,name: 'Hello',surname: 'other454r', highlight: false},
  {id: 52,name: 'Foobar',surname: 'othe44rr' highlight: false},
  {id: 53,name: 'Barfoo',surname: 'othe52rr' highlight: false},
  {id: 54,name: 'Magic',surname: 'other1r' highlight: false},
  {id: 55,name: 'Wand',surname: 'other4r' highlight: false}
];

然后在重复中，您可以使用角度ng-click和ng-class指令，它们看起来如下所示：

<span ng-repeat="item in items"
    ng-click="item.highlight=!item.highlight"
    ng-class="{'blue': item.highlight}">
  {{item.name + ' ' + item.surname}}
</span>

Answer 2

您可以尝试使用ng-class将类绑定到元素的属性，并通过ng-click设置item属性，而不是使用指令。

new

如果您的数据是持久性的，那么当您浏览页面时，这些类将自动应用。

有关ng-class和ng-click

的更多信息

constant pool

和

https://docs.angularjs.org/api/ng/directive/ngClass

AngularJS在分页中使用ng-repeat更改类

2 个答案: