I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, the selected items are no longer highlighted. Can anyone suggest a solution to keep the selected items highlighted even after a search? Here is the code snippet:
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/
Any help will be appreciated!