我有一个简单的AngularJS应用，我想用它来通过标签过滤搜索结果。第一步，我将创建一个过滤器链接列表，通过它们可以切换各个标签的可见性。问题在于，单击一个链接会切换列表中所有链接的状态。
我意识到这可能需要重构以达到我的最终目标，但是我想先了解一下这里发生的事情。如何将范围限制为单击的元素？
HTML：
<ul ng-app="myApp" ng-controller="myCtrl">
<li><a href="" ng-click="toggleSelected()">
<span class="glyphicon"
ng-class="{'glyphicon-check': selected, 'glyphicon-unchecked': !selected}">
</span> Office Productivity
</a></li>
<li><a href="" ng-click="toggleSelected()">
<span class="glyphicon"
ng-class="{'glyphicon-check': selected, 'glyphicon-unchecked': !selected}">
</span> Leadership
</a></li>
...
</ul>
JavaScript：
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
// toggle the selected state of an element scope, with a default of true
$scope.toggleSelected = function () {
$scope.selected = $scope.selected ? !$scope.selected : true;
return $scope.selected;
};
});
我对您的代码进行了一些重构，取而代之的是从控制器获取清单。然后，我遍历对象，并使用属性（复选框的标题）进行ng-click调用toggleSelected。
这是编辑过的jsFiddle：http : //jsfiddle.net/otprj3du/3/
我将此添加到范围中：
$scope.checkBoxes = {
'Office Productivity':0,
'Leadership':0,
'Communication Skills':0,
'HR & Compliance':0,
'Career Readiness':0,
};
并像这样渲染列表：
<li ng-repeat="(title,selected) in checkBoxes">
<a href="" ng-click="toggleSelected(title)">
<span class="glyphicon"
ng-class="{'glyphicon-check': selected, 'glyphicon-unchecked': !selected}">
</span>
{{ title }}
</a>
</li>
在toggleSelected中，我只是编辑了$scope.checkBoxes：
$scope.toggleSelected = function (title) {
$scope.checkBoxes[title] = $scope.checkBoxes[title] ? !$scope.checkBoxes[title] : 1;
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句