Ng-showとフィルタ

Question

ページが最初に読み込まれたときに、都市のリスト全体を表示したいと考えています。

ユーザーがその都市のチェックボックスをクリックすると、ng-show/ng-hideを使用して、ユーザーが選択した都市の結果を表示し、選択されていない都市を非表示にします。

フィルタを使用してdomに追加/削除しても、再描画することはありません。

これを行うには、誰もが最良の方法を知っていますか？

Answer 1

ng-repeatを使用してすべての都市を表示していると思いますか？そうならば、あなたはこのような何かを行うことができます。ユーザーは、都市を選択

<ul class="cities"> 
    <li ng-repeat="city in cities" ng-show="!selectedCity">{{city}}</li> 
    <li ng-show="selectedCity">{{selectedCity}}</li> 
</ul> 

たら、あなたの変数selectedCityが移入されます、そして、それはリストを非表示にのみ示すselectedCityとliを紹介します。

ユーザーがチェックボックスをクリックしたときに、コントローラに変数を設定する必要があります。

あなたはコードを投稿していないため、都市を表示するための実装が正確にわかりません。私はこの例がはっきりしていることを望む。

これがfiddleを参照して、これが探している機能であるかどうかを確認してください。例えば

Answer 2

uが$ scope.citiesの都市を保持し、あなたのコントローラで、その後

設定し

.controller{ 
$scope.showcitydata=false; 
$scope.showCities=function(city){ 
if(city.select=='YES;){ 
    $scope.showcitydata=true; 
    } 
} 
} 

Answer 3

を繰り返し

<input type="checkbox" ng-model="$scope.cities[$index]['select']" ng-true-value="'YES'" ng-false-value="NO" ng-click="showCitiesData(city)"> 

ngの都市では、このようなランディングページを使用]チェックボックスに都市を繰り返した場合フィルタをng-repeatオブジェクト式のディレクティブ

Answer 4

それを試してみてください：= "都市== selectedcity" `

<label ng-init="city = {}"><input type="checkbox" ng-change="selected = true" ng-model="city['London']">London</label> 
<label><input type="checkbox" ng-change="selected = true" ng-model="city['Los Angeles']">Los Angeles</label> 

<div ng-controller="MyCtrl"> 
    <ul class="employees"> 
     <li ng-repeat="employee in employees" ng-show="!selected || city[employee.city]"> 
     {{employee.name}} 
     </li> 
    </ul> 
</div>