链接与AngularJS多个过滤器 [英] Chaining multiple filters with AngularJS
本文介绍了链接与AngularJS多个过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的工作链接多个过滤器，但同时认为它通过我意识到，它创建code的极端量（redudancy将在此用例的最好的术语），这让我怀疑这可能更动态完成/一概而论。基本上我有5-6下拉菜单，用户可以选择一个或多个选项将数据与筛选。我做了这基于一个下拉菜单，但我想进一步扩展这一点。在这个code样品我有基于一列进行排序一颗颗下拉菜单。
JavaScript的：
＆LT;脚本＆GT;
使用严格的;
VAR应用= angular.module（'应用'，['ngResource'，'App.filters']）;App.controller（'ExerciseCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{ $ scope.selectedMainMuscle = []; $ http.get（'/ REST /运动/'）
。然后（功能（RES）{
$ scope.exercises = res.data;
}）; $ scope.orderProp ='名'; $ http.get（'/ REST /肌肉/'）
。然后（功能（RES）{
$ scope.muscles = res.data;
}）; $ scope.isChecked =功能（）{
如果（_.contains（$ scope.selectedMainMuscle，this.muscle.id））{
返回'glyphicon glyphicon-OK拉权;
}
返回false;
}; $ scope.setSelectedMainMuscle =功能（）{
VAR ID = this.muscle.id;
如果（_.contains（$ scope.selectedMainMuscle，ID））{
$ scope.selectedMainMuscle = _.without（$ scope.selectedMainMuscle，身份证）;
}其他{
$ scope.selectedMainMuscle.push（ID）;
}
返回false;
};
}]）;angular.module（'App.filters'，[]）。过滤器（'mainMuscleFilter'，[功能（）{
返回功能（练习，selectedMainMuscle）{
如果（angular.isUndefined（练习）及！＆放大器;！angular.isUndefined（selectedMainMuscle）及＆放大器; selectedMainMuscle.length大于0）{
变种tempClients = [];
angular.forEach（selectedMainMuscle，功能（ID）{
angular.forEach（练习，功能（运动）{
如果（angular.equals（exercise.main_muscle.id，ID））{
tempClients.push（运动）;
}
}）;
}）;
返回tempClients;
}其他{
返回练习;
}
};
}]）;
＆LT; / SCRIPT＆GT;
HTML
＆LT; DIV CLASS =BTN-组NG-CLASS ={打开：DD2}＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认下拉拨动NG点击=DD2 = DD2！＆GT;主营肌肉＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT; UL类=下拉菜单＆GT;
＆LT;李NG重复=肌肌肉＆GT;
＆LT; A HREF NG点击=setSelectedMainMuscle（）＆GT; {％逐字％} {{muscle.name}} {％endverbatim％}＆LT;跨度数据-NG-CLASS =器isChecked（）＆GT;＆LT; /跨度＆GT;＆下; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT;表类=表的表悬停＆GT;
＆LT; TR＆GT;＆LT; TD＆GT;＆LT;强＆GT;名称＆LT; / STRONG＆GT;＆LT; / TD＆GT;＆LT; TD＆GT;＆LT;强＆GT;主营muscle</strong></td><td><strong>Equipment</strong></td></tr>
＆LT; TR NG重复=演习过滤=（练习| mainMuscleFilter：selectedMainMuscle）＆GT;
{%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
＆LT; / TR＆GT;
＆LT; /表＆gt;
解决方案
我会做所有的检查一个过滤器，我看不出一个 mainMuscleFilter 会可重复使用足以保证分离，让一个独立的模块单独列入。你可以概括你的方法来切换一个id列入第一个数组，并检查虽然对列入：
$ scope.selected = {
肌肉： []，
设备：[]
};$ scope.isChecked =功能（ARR，ID）{
如果（_.contains（ARR，ID））{
返回'glyphicon glyphicon-OK拉权;
}
返回false;
}; $ scope.toggleInclusion =功能（ARR，ID）{
变种指数= arr.indexOf（ID）;
如果（索引＆gt; = 0）{
arr.splice（指数，1）;
}其他{
arr.push（ID）;
}
返回false;
};
HTML
＆LT;李NG重复=肌肉肌＆GT;
＆LT; A HREF NG点击=toggleInclusion（selected.muscle，muscle.id）＆GT;
{{muscle.name}}
＆LT;跨度数据-NG-CLASS =器isChecked（selected.muscle，muscle.id）＆GT;＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT; /李＆GT;
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. 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:
<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:
<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. You can generalize your methods to toggle the inclusion of an id in an array and to check for the inclusion though:
$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:
<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>
这篇关于链接与AngularJS多个过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
