gpt4 book ai didi

jquery - 在过滤器搜索 Angular js 后保持 li 选择

转载 作者:太空宇宙 更新时间:2023-11-04 01:47:00 25 4
gpt4 key购买 nike

我在 ul 中有三个列表项。有三个名字:Roy、Sam、David。我可以在点击时切换每个 li 就好了。但是,当我进行搜索并返回时,所选元素不再突出显示。关于如何让他们被选中的任何建议。这是我的 js fiddle :

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/

谢谢。

最佳答案

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

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

Controller :

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

Demo

关于jquery - 在过滤器搜索 Angular js 后保持 li 选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44296135/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com