フィルタ検索後にliを選択します。角度js

ulには3つのリスト項目があります。ロイ、サム、デビッドの3つの名前があります。私はちょうど上の各リをトグルすることができます。しかし、私が検索して戻ってくると、選択した項目はもう強調表示されません。どのように私はそれらを選択し続けることができるかに関する提案。フィルタ検索後にliを選択します。角度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/

ありがとう：ここに私のjsのバイオリンです。

出典

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の新しいです。 1つの質問ですが、この行は単純な英語で何（$ scope.selected = selected = {};）ですか？私はあなたがselectedと呼ばれるモデルを宣言しているのを知っています。 – loveprogramming

私は怠惰で、関数内で常に '$ scope'を書いていません....両方の変数は同じオブジェクトを参照しますが、' $ scope'のプロパティしか認識しません – charlietfl

私はあなたの質問を正しく読まなかったので、編集されました！

角度を使用して選択内容をコントローラに保存します。

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

フィルタ検索後にliを選択します。角度js

答えて

関連する問題