在过滤器搜索角度 js 后保持 li 被选中答案

【问题标题】：Keep li selected after filter search angular js在过滤器搜索角度 js 后保持 li 被选中
【发布时间】：2017-05-31 23:19:18
【问题描述】：

我在 ul 中有三个列表项。有三个名字：罗伊、山姆、大卫。我可以在点击时切换每个 li 就好了。但是，当我进行搜索并返回时，所选项目不再突出显示。关于如何让他们被选中的任何建议。这是我的 js 小提琴：

var app = angular.module("ap",[]);

app.controller("con",function($scope){
		$scope.firstNames = ['Sam', 'David', 'Roy'];

});

app.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

.active {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
<input type="text" ng-model="searchText"/>
<ul ng-repeat="firstName in firstNames | filter:searchText">
<li toggle-class="active">{{firstName}}</li>

</ul>
  
</body>

http://jsfiddle.net/baa2G/126/

谢谢。

【问题讨论】：

选择是否应该像单选按钮一样，或者您可以一次选择多个？

标签： jquery css angularjs

【解决方案1】：

请改用ng-class。始终考虑如何首先使用您的数据模型......并让它控制视图

<li ng-class="{active: selected[firstName]}" 
    ng-click="toggleSelected(firstName)">{{firstName}}</li>

控制器：

   $scope.selected = selected = {};
   $scope.toggleSelected = function(name){  
      selected[name] = !selected[name];
   }

Demo

【讨论】：

正是我想要的。谢谢。我是角度 js 的新手。一个问题，这条线用简单的英语做什么（$scope.selected = selected = {};）？我知道你声明了一个名为 selected 的模型，第二个选择的目的是什么？
我很懒，讨厌一直在函数内部写$scope....两个变量都引用同一个对象...但是视图只识别$scope的属性

【解决方案2】：

已编辑，因为我没有正确阅读您的问题！

使用 Angular 将您的选择存储在控制器中。

我已将您的 firstNames 修改为 users 并将每个条目更改为一个对象。

$scope.users = [
    {name: 'Sam', isSelected, false},
    {name: 'David', isSelected, false}, 
    {name: 'Roy', isSelected, false}
];
$scope.toggleSelection(user){
    user.isSelected = !user.isSelected;
}
<ul ng-repeat="user in users | filter:searchText">
<li ng-click="toggleSelection(user)" ng-class="{'active': user. isSelected}">{{user.name}}</li>

【讨论】：