[英]Chaining multiple filters with AngularJS
I am working on chaining multiple filters, but while thinking it through i realised that it creates an extreme amount of code (redudancy would be the best term in this use-case), which made me wonder if this could be done more dynamically/generalized. 我正在研究如何链接多个过滤器,但经过仔细考虑,我意识到它会创建大量的代码(冗余是该用例中的最佳术语),这使我想知道是否可以更动态/更通用地完成此操作。 Basically i have 5-6 dropdown menu where a user can select one or more options to filter the data with.
基本上我有5-6下拉菜单,用户可以在其中选择一个或多个选项来过滤数据。 I have made this based on one dropdown menu but i want to extend this further.
我已经基于一个下拉菜单做了这个,但是我想进一步扩展。 In this code sample i have one dropdown menu which sorts out based on one column.
在此代码示例中,我有一个下拉菜单,该菜单根据一列进行排序。
JavaScript: JavaScript的:
<script>
'use strict';
var App = angular.module('App',['ngResource','App.filters']);
App.controller('ExerciseCtrl', ['$scope','$http', function($scope, $http) {
$scope.selectedMainMuscle = [];
$http.get('/rest/exercises/')
.then(function(res){
$scope.exercises = res.data;
});
$scope.orderProp = 'name';
$http.get('/rest/muscles/')
.then(function(res){
$scope.muscles = res.data;
});
$scope.isChecked = function () {
if (_.contains($scope.selectedMainMuscle, this.muscle.id)) {
return 'glyphicon glyphicon-ok pull-right';
}
return false;
};
$scope.setSelectedMainMuscle = function () {
var id = this.muscle.id;
if (_.contains($scope.selectedMainMuscle, id)) {
$scope.selectedMainMuscle = _.without($scope.selectedMainMuscle, id);
} else {
$scope.selectedMainMuscle.push(id);
}
return false;
};
}]);
angular.module('App.filters', []).filter('mainMuscleFilter', [function () {
return function (exercises, selectedMainMuscle) {
if (!angular.isUndefined(exercises) && !angular.isUndefined(selectedMainMuscle) && selectedMainMuscle.length > 0) {
var tempClients = [];
angular.forEach(selectedMainMuscle, function (id) {
angular.forEach(exercises, function (exercise) {
if (angular.equals(exercise.main_muscle.id, id)) {
tempClients.push(exercise);
}
});
});
return tempClients;
} else {
return exercises;
}
};
}]);
</script>
HTML: HTML:
<div class="btn-group" ng-class="{open: dd2}">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="dd2=!dd2">Main muscle <span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="muscle in muscles">
<a href ng-click="setSelectedMainMuscle()">{%verbatim%}{{muscle.name}}{%endverbatim%} <span data-ng-class="isChecked()"></span></a>
</li>
</ul>
</div>
<table class="table table-hover" >
<tr><td><strong>Name</strong></td><td><strong>Main muscle</strong></td><td><strong>Equipment</strong></td></tr>
<tr ng-repeat="exercise in filtered = (exercises | mainMuscleFilter:selectedMainMuscle)">
{%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
</tr>
</table>
I would do all the checks in one filter, I don't see how a mainMuscleFilter
would be reusable enough to warrant separation, let alone inclusion in a separate module. 我将在一个过滤器中进行所有检查,但看不到
mainMuscleFilter
如何可重复使用以保证分离,更不用说将其包含在单独的模块中了。 You can generalize your methods to toggle the inclusion of an id in an array and to check for the inclusion though: 您可以泛化您的方法来切换数组中是否包含id并通过以下方法检查是否包含:
$scope.selected = {
muscle: [],
equipment: []
};
$scope.isChecked = function (arr, id) {
if (_.contains(arr, id)) {
return 'glyphicon glyphicon-ok pull-right';
}
return false;
};
$scope.toggleInclusion = function (arr, id) {
var index = arr.indexOf(id);
if (index >= 0) {
arr.splice(index, 1);
} else {
arr.push(id);
}
return false;
};
HTML: HTML:
<li ng-repeat="muscle in muscles">
<a href ng-click="toggleInclusion(selected.muscle, muscle.id)">
{{muscle.name}}
<span data-ng-class="isChecked(selected.muscle, muscle.id)"></span>
</a>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.