Question

我希望能够在首次加载页面时显示整个城市列表。

当用户点击该城市的复选框时，我想使用ng-show / ng-hide显示用户选择的城市的结果，并隐藏未选择的城市。

我不想使用过滤器，因为这会从dom中添加/删除，导致它重新渲染。

有没有人知道这样做的最佳方式。

Answer 1

试一试：

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

Answer 2

我猜你正在使用ng-repeat来展示所有城市？如果是的话，你可以这样做：

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

一旦用户选择了某个城市，您的变量selectedCity就会填充，并且会隐藏该列表并显示仅li显示的selectedCity。

当用户点击复选框时，您必须在控制器中设置变量selectedCity。

你没有发布任何代码，所以我不知道你的实现到底是什么来显示城市。我希望这个例子很清楚。

请参阅此fiddle，了解这是否是您正在寻找的功能。

Answer 3

例如，如果您在$ scope.cities中持有城市，并且您在着陆页上重复使用城市，请在城市中使用复选框

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

然后在您的控制器中

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

Answer 4

使用对象表达式

将过滤器设置为 ng-repeat 指令

ng-repeat="city in cities | filter:{selected:true}"

Ng-show和过滤器

4 个答案: