將過濾器應用於來自不同控制器的ngRepeat

如何從其他控制器對ngRepeat應用過濾器？將過濾器應用於來自不同控制器的ngRepeat

從Filters控制器我怎麼applyFilter()：在Results控制器

<div ng-controller="Results"> 
    <div ng-repeat="item in items"> 
     {{item.thing}} 
    </div> 
</div>

來源

2013-05-17 Dan Kanze

什麼'applyFilter'該怎麼辦？ – lucuma

@lucuma應用過濾器。 –

你想使用標準的角度過濾器過濾列表？ – lucuma

你可以使用一個父控制器或服務

<div ng-controller="Filters"> 
    <span ng-click="applyFilter()"></span> 
</div>

...要items。下面的第一個示例使用父控制器來定義項目和篩選器值以與兩個子控制器共享它。第二個例子演示了使用注入到兩個控制器的服務，並且不需要父控制器。

父控制器示例：我將有一個父控制器，並定義該控制器中的數據和過濾器值。這將允許每個孩子控制器能夠輕鬆地處理和操作的過濾器：

演示：http://plnkr.co/edit/yrtsX5SQsRiNSho6o9x8?p=preview

HTML：

<body ng-controller="MainCtrl"> 
    Hello {{name}}! 

    <div ng-controller="Filters"> 
    <span ng-click="applyFilter()">Apply Filter</span> 
    </div> 

    <div ng-controller="Results"> 
    <div ng-repeat="item in items | filter:filterFunc "> 
    {{item}} 
    </div> 
    </div> 

</body>

控制器：

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.items = [1,2,3,4,5,6,7]; 
    $scope.filterVal = 0; 

}); 

app.controller('Filters', function($scope) { 
    $scope.applyFilter = function() { 
      $scope.$parent.filterVal = 5; 
      $scope.$apply(); 
    } 
}); 

app.controller('Results', function($scope) { 
$scope.filterFunc= function(item) { 
    console.log(item); 
    if (item>$scope.filterVal) 
     return item; 
    } 

});

服務實例。以下是包含過濾器值和項目的服務的更新示例。 http://plnkr.co/edit/wZFKBMRv0SeEsXNqARe2?p=preview

app.controller('Filters', function($scope, Utils) { 
    $scope.applyFilter = function() { 
      Utils.setFilter(4); 
    } 
}); 



app.controller('Results', function($scope, Utils) { 
    $scope.items = Utils.getItems(); 
$scope.filterFunc= function(item) { 
    console.log(item); 
    if (item>Utils.getFilter()) 
     return item; 
    } 

}); 

angular.module('ServicesUtils', []). 
    factory('Utils', [ function() { 

     var items = [1,2,3,4,5,6,7]; 
     var filter = 0; 

     var service = { 
     getFilter:function() { 
      return filter; 
     }, 
     getItems:function() { 
     return items; 
     }, 
     setFilter:function(n) { 
      filter = n; 
     } 
     }; 

    return service; 

    }]);

來源

2013-05-17 20:00:06 lucuma

你是否「必須」使用父控制器？有沒有其他技術可以參考？ –

如果您不想使用父控制器 – lucuma

我會看到您可能需要將項目和過濾器信息存儲在服務中。所以click事件會更新兩個控制器共享的服務中的過濾器值。 –

將過濾器應用於來自不同控制器的ngRepeat

回答

相關問題