angularjs中列表中单个项目的独立范围

Isolated scope for individual items in list in angularjs

本文关键字：独立 范围 单个 列表 angularjs 项目      更新时间：2024-03-09

我有一个项目列表，我正在使用ng repeat 填充

<ul>
    <li ng-repeat="item in items" ng-class="setClass" ng-click="assignClass()">{{item.name}}</li>
</ul>

在我的控制器

$scope.assignClass = function(){
    $scope.setClass = "sampleClass";
}

当我这样做并点击任何一个项目时，所有项目都会添加sampleClass。

我需要这个场景，

当我点击第一个项目时，该项目应该具有sampleClass，当我点击第二个项目时我希望第一个和第二个都应该具有sampleClass

我如何实现这种情况？

我们使用的代码设置了您提到的所有列表项的样式。我对代码做了一些更改，为无序列表中的单个项设置了类。通过使用所选项目作为参数调用assignClass，可以设置该项目的类。

<ul>
    <li ng-repeat="item in items" ng-class="item.setClass" ng-click="assignClass(item)">
        {{item.name}}
    </li>
</ul> 

$scope.assignClass = function(selectedItem){
    selectedItem.setClass = "sampleClass";
}

将item传递到assignClass函数中。

<ul>
    <li ng-repeat="item in items" ng-click="assignClass(item)">{{item.name}}</li>
</ul>

然后更改该项目的类别

$scope.assignClass = function(item){
    $(item).toggleClass("sampleClass");
}
相关文章：