Angularjs复选框多个过滤器

问题描述：

我有工厂，发送请求获取一些数据。回应后，我会收到它在控制器和创建范围列表。比我必须通过检查复选框过滤此列表。我会收到结果，但它们不可见。帮我请...Angularjs复选框多个过滤器

$scope.checkRooms = []; 
    $scope.filterRooms = function(app) { 

     return function(p) { 
      for (var i in $scope.checkRooms) { 

       if (p.rooms == $scope.uniqueRooms[i] && $scope.checkRooms[i]) { 
        return true; 
       } 
      } 
     }; 
    };

更新2 这里工作fiddle。现在如何按ASC房间号码排序？ “orderBy”函数排序正确但房间索引排序错误

答

好的这里有一个稍微不同的方法，即在控制器中完成过滤，而不是在ng-repeat中使用filter:expression。

不是唯一的方法，但我认为你应该考虑从控制器中删除任何watch函数，这使得测试你的控制器非常困难。

Fiddle

HTML

<div class="filter-wrap" ng-controller="mainController"> 

    <div class="main-filter"> 
     <div class="form-group"> 
      <span class="gr-head"> 
       Rooms count 
      </span> 

      <div class="check-control" ng-repeat="room in uniqueRooms | orderBy: room"> 
       <input 
        type="checkbox" 
        name="room_cnt" 
        ng-model="checkboxes[room]" 
        ng-change='onChecked(filterRoom)' 
       /> 
       <label>{{room}}</label> 
      </div>       
     </div> 

    </div> 

    <table> 
     <thead> 
      <tr> 
       <th> 
        <span>Rooms</span> 
       </th> 
       <th> 
        <span>Size</span> 
       </th>  
       <th> 
        <span>Price</span> 
       </th>         
      </tr> 
     </thead> 

     <tbody> 
      <tr ng-repeat="app in filteredApps"> 
       <td>{{app.rooms}}</td> 
       <td>{{app.size}}</td> 
       <td>{{app.price}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <div class="result"> 
     <h2>SCOPE size</h2> 
     {{filteredRooms}} 
    </div> 

</div>

var sortApp = angular.module('sortApp',[]); 

sortApp.controller('mainController', function($scope, $timeout) { 

    $scope.apps = [ 
     { 
      "rooms": 2, 
      "size": 55.50, 
      "price": 55500.00, 
     }, 
     { 
      "rooms": 1, 
      "size": 25.50, 
      "price": 45000.00, 
     }, 
     { 
      "rooms": 8, 
      "size": 28, 
      "price": 15500.00, 
     }, 
     { 
      "rooms": 1, 
      "size": 28, 
      "price": 15500.00, 
     }, 
     { 
      "rooms": 8, 
      "size": 28, 
      "price": 15500.00, 
     }, 
     { 
      "rooms": 3, 
      "size": 120.55, 
      "price": 88990.00, 
     }, 
     { 
      "rooms": 3, 
      "size": 120.55, 
      "price": 88990.00, 
     } 
    ]; 

    $scope.filteredApps = $scope.apps; 
    $scope.uniqueRooms  = uniqueItems($scope.apps, 'rooms'); 
    $scope.onChecked  = filterRooms; 
    $scope.checkboxes  = createCheckboxes($scope.uniqueRooms); 

    function filterRooms(checkboxes){ 

     $scope.filteredApps = []; 

     angular.forEach($scope.apps, function(app){ 

      if($scope.checkboxes[app.rooms]){ 
       $scope.filteredApps.push(app); 
      } 

     }); 

    } 

    function createCheckboxes(labels){ 

     var checkboxes = {}; 

     angular.forEach(labels, function(label){ 
      checkboxes[label] = true; 
     }); 

     return checkboxes; 
    } 

    function uniqueItems(data, key) { 

     var result = []; 

     for (var i = 0; i < data.length; i++) { 
      var value = data[i][key]; 

      if (result.indexOf(value) == -1) { 
       result.push(value); 
      } 

     } 
     return result; 
    }; 


});

真棒！谢谢 – Satif

Angularjs复选框多个过滤器

相关推荐