單擊時基於數組值的angularjs ng-repeat過濾器
[英]angularjs ng-repeat filter based on array values on click
問題描述
我有一個數組$scope.something = ['xyz','abc','pqr'];
點擊時，我想過濾ng-repeat數據，以便它將返回以'xyz' ， 'pqr'和'abc'過濾的結果JSON數據。
ng-repeat="data in flt_det | filter:something" 。
提前致謝。
2 個解決方案
解決方案1
2 已采納 2015-04-02 16:50:18
如果要使用$scope.something任何匹配元素過濾數據，則可能需要創建自定義過濾器：
app.filter("somethingFilter", function() {
return function(array, something) {
return array.filter(function(ele) {
return (something.indexOf(ele) > 0)
});
}
});
現在在您的HTML中，
ng-repeat="data in flt_det | filter:something".
如果數據存在something數組中，則將過濾flt_det 。
在點擊按鈕？
$scope.buttonClickHandler = function() {
$scope.flt_det = $scope.flt_det.filter(function(ele) {
return ($scope.something.indexOf(ele) > 0)
});
}
單擊該按鈕將更新$scope.flt_det數據。
在這種情況下，您甚至可以使用$filter ：
app.controller("myCtrl", function($scope, $filter)
{
$scope.buttonClickHandler = function() {
$scope.flt_det = $filter('somethingFilter')($scope.flt_det,$scope.something);
};
});
編輯演示
angular.module("app",[]) .controller("MainCtrl", function($scope) { $scope.flt_det = ["abc", "pqr", "sdfs", "sdfds", "xyz"]; $scope.something = ["abc", "pqr", "xyz"]; $scope.buttonClickHandler = function() { $scope.flt_det = $scope.flt_det.filter(function(ele) { return ($scope.something.indexOf(ele) > 0) }); } });
<!DOCTYPE html> <html ng-app="app"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body ng-controller="MainCtrl"> <div ng-repeat="data in flt_det"> {{data}} </div> <button type="button" ng-click="buttonClickHandler()">Filter data</button> </body> </html>
解決方案2
1 2015-04-02 17:05:17
編輯：固定為解決使用數組輸入進行過濾的問題
如果要在控制器中使用內置的Angular過濾器而不是自定義過濾器，則另一種選擇是執行以下操作（使用JSFiddle ）：
$scope.filtered = [];
for(var index = 0; index < $scope.something.length; index++) {
var singleFilter = $filter('filter')($scope.flt_det, $scope.something[index]);
$scope.filtered = _.union($scope.filtered, singleFilter);
}
這將維護一個單獨的$ scope.filtered數組。 它還利用Underscore.js的並集功能。 然后您的html將如下所示：
ng-repeat="data in filtered"
有關在控制器中使用過濾器的信息，請參見Angular文檔： https : //docs.angularjs.org/api/ng/filter/filter
在 AngularJS ng-repeat 中過濾“自定義值”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.