過濾器搜索角度後保持李選擇js

我有三個列表項在ul中。有三個名字：羅伊，薩姆，大衛。我可以切換每個點擊就好了。但是，當我執行搜索並返回時，所選項目不再突出顯示。任何關於如何讓他們被選中的建議。這裏是我JS提琴：過濾器搜索角度後保持李選擇js

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

 
app.controller("con",function($scope){ 
 
\t \t $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/

感謝。

來源

2017-05-31 loveprogramming

是選擇應該表現爲單選按鈕，或者你可以一次選擇多個嗎？ – sudo

改爲使用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

來源

2017-05-31 23:39:30 charlietfl

正是我在找什麼。謝謝。我是角js新手。一個問題，這條線是做什麼的（$ scope.selected = selected = {};）用簡單的英語？我知道你聲明瞭一個名爲selected的模型，第二個選擇的模型是什麼？ – loveprogramming

我很懶，恨在函數內部一直寫'$ scope' ....兩個變量都引用相同的對象...但是視圖只識別'$ scope'的屬性 – charlietfl

已編輯，因爲我沒有正確閱讀您的問題！

使用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>

來源

2017-05-31 23:35:29 sudo

過濾器搜索角度後保持李選擇js

回答

相關問題