Question

我是角色的新人。我设法使用角度过滤，它工作正常，但现在我想在控制器外移动过滤器，这对我来说非常具有挑战性。

这是我的html页面：

<div >

    <input type="checkbox" ng-click="itemType('CAR')"/> CAR


    <input type="checkbox" ng-click="itemType('BIKE')"/> BIKE


    <input type="checkbox" ng-click="itemType('CYCLE')"/> CYCLE

</div>  
<table>
   <tbody>
          <tr ng-repeat="item in items | filter:filterItem">
            <td >{{item.name}}</td>
            <td >{{item.type}}</td>
          </tr>
    </tbody>
</table>

和控制器：

app.controller('MainCtrl', function($scope) {

 $scope.items = [
    {name: 'bmw', type:'CAR' },
    {name: 'ducati',type:'BIKE'},
    {name: 'airbas',type:'CYCLE' }
   ];

$scope.typeArray = [];
$scope.itemType = function(type) {
var i = $.inArray(type, $scope.typeArray);
if (i > -1) {
  $scope.typeArray.splice(i, 1);
} else {
  $scope.typeArray.push(type);
}
}

$scope.filterItem = function(item) {
if ($scope.typeArray.length > 0) {
  if ($.inArray(item.type, $scope.typeArray) < 0){
    return false;
  }
}
return item;
}
});

如何将过滤从控制器移动到app.filter（）。感谢。

Answer 1

是的，自定义过滤器是一个单独的模块，您可以将其写为：

iApp.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];

    var looping = function(name){
      angular.forEach(items, function(item) {
         if(item.type === name){
             filtered.push(item);
           }
        });
    }

      if(types.car == true){
        looping('CAR');
      }
      if(types.bike == true){
        looping('BIKE');
      }
      if(types.cycle == true){
        looping('CYCLE');
      }


    return filtered;
  };
});

控制器：

$scope.types = {car: false, bike:false, cycle: false};

   $scope.items = [
    {name: 'bmw', type:'CAR' },
    {name: 'ducati',type:'BIKE'},
    {name: 'airbas',type:'CYCLE' }
   ];

演示1 Plunker

<强> [编辑]

如果要在未选中任何复选框时显示所有单元格，请将其添加到过滤器：

  var flag = true;
  angular.forEach(types, function(type){
    flag = flag & !type; // if one of flags will be false, we get flag=false
  });

  if(flag == true){
    return items;
  }

演示2 Plunker

仅供参考：您可以看到过滤器不使用$scope。如果要传递其他参数，则语法应为：

 <tr ng-repeat="item in items | filter:myfilter:types">

其中types是某个对象

如何在角度范围内移动控制器外部的滤波器

1 个答案: