Javascript 如何将作用域限制为单击的元素？

我有一个简单的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>

---

我对您的代码进行了一点重构，取而代之的是从控制器获取清单。然后我循环遍历对象，在

ng中单击
I调用
toggleSelected
，并使用一个属性（复选框的标题）

以下是经过编辑的JSFIDLE：

我在范围中添加了以下内容：

$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>

非常感谢。我将不得不考虑一下是否可以在这样的对象中设置
复选框。我展示的是一个潜在动态列表的小样本，所以我怀疑它会很好地工作。我要出门了，明天早上再作回应。
<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>

$scope.toggleSelected = function (title) {
  $scope.checkBoxes[title] = $scope.checkBoxes[title] ? !$scope.checkBoxes[title] : 1;
};