Question

我想让用户只能看到地图的颜色值是真实的＆＃39;在ng-repeat结果中，如果他选择＆＃34;只显示彩色地图＆＃34;复选框。

这是我的代码：

<section class="form-group">
    <label>Sort By:</label>
                    <select class="form-control" ng-model="orderProp">
                        <option value="title">Title</option>
                        <option value="filename">File Name</option>
                        <option value="class">Classification</option>
                    </select>
 </section>
                <label class="checkbox-inline">
                    <input type="checkbox" value="color"> Only show color maps
                </label>

以下是我的观点：

<tr ng-animate="'animate'" ng-repeat="item in filtered = (mapData | filter: query | orderBy:orderProp" ng-show="orderProp !== 'color || item.color">
                    <td>{{item.class}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.filename}}</td>
                </tr>

数据来自JSON文件，其颜色为＆＃39;值为 true 或 false 的键。

我的控制器代码是：

mapApp.controller('ListController', ['$scope', '$http', function($scope, $http){
    $http.get('js/MOCK_DATA.json').success(function(data){
        $scope.mapData = data;
    });
    $scope.orderProp = "title";
}]);

这是 live demo of the page

Answer 1

首先，将ng-model添加到选择框：

<label class="checkbox-inline">
                    <input ng-model="showColor" type="checkbox" value="color"> Only show color maps
</label>

然后，删除ng-show：

<tr ng-animate="'animate'" ng-repeat="item in filtered = (mapData | filter: query | orderBy: [orderProp,'title'])">
        <td>{{item.class | uppercase}}</td>
        <td>{{item.title}}</td>
        <td>{{item.filename}}</td>                        
</tr>

最后，将控制器更改为：

mapApp.controller('ListController', ['$scope', '$http', function($scope, $http){
  var fullData = [];
  $http.get('js/MOCK_DATA.json').success(function(data){
    $scope.mapData = data;
    fullData = data;
  });

  $scope.orderProp = "title";
  //Filter data when check the checkbox
  $scope.$watch('showColor', function (newValue, oldValue) {
    if (newValue) {
         $scope.mapData = fullData.filter(function(item) { return item.color;});
    } else {
         $scope.mapData = fullData;
    }
  });

}]);

如何使用复选框输入来过滤结果？

1 个答案: