Angular js过滤器中的多重选择
multi multiselect in Angular js filter
我有4个不同的选择元素,我想用它们过滤我的n -repeat。如果我选择不同选择元素的1个选项,结果是好的,但当我选择2个选项时,它失败了。
就是这个例子http://jsfiddle.net/245NY/
HTML:<div ng-app="app" ng-controller="goalList" >
<div class="hidden filter">
<select multiple="multiple" data-placeholder="Team" ng-multiple="true" ng-model="selectedTeams" ng-options="team for team in teams"class="select" >
</select>
<select multiple="multiple" data-placeholder="League" ng-multiple="true" ng-model="selectedLeague" ng-options="league for league in leagues"class="select" >
</select>
<select multiple="multiple" data-placeholder="Season" ng-multiple="true" ng-model="selectedSeason" ng-options="season for season in seasons"class="select" >
</select>
<select multiple="multiple" data-placeholder="City/Country" ng-model="selectedCountry" ng-options="countrys for countrys in country"class="select" ></select>
</div>
<div>
<div ng-repeat="goal in goals | filter:{ Team: selectedTeams, League:selectedLeague,Season:selectedSeason ,Country:selectedCountry}" >
{{goal.Team}}
</div>
</div>
</div>
javascript: var json = [
{
"Team":"Paris Saint Germain",
"VS":"Guingamp",
"Home":"Ja",
"Date":"2013-08-31",
"League":"Ligue 1",
"Result":"2-0",
"City/Country":"Paris/France",
"URL":"https://www.youtube.com/watch?feature=player_detailpage&v=0h46CxzQpuY#t=160",
"start":"2:40",
"Season":"2013/2014",
"quality":""
},
{
"Team":"Kazakhstan",
"VS":"Sweden",
"Home":"",
"Date":"2013-09-10",
"League":"National",
"Result":"0-1",
"City/Country":"Astana/Kazakhstan",
"URL":"https://www.youtube.com/watch?feature=player_detailpage&v=vO80M5ftVSo#t=5",
"start":"0:04",
"Season":"2013/2014",
"quality":""
},
{
"Team":"Paris Saint Germain",
"VS":"Monaco",
"Home":"Ja",
"Date":"2013-09-22",
"League":"Ligue 1",
"Result":"1-1",
"City/Country":"Paris/France",
"URL":"https://www.youtube.com/watch?feature=player_detailpage&v=XMKpCwZovi0#t=32",
"start":"0:30",
"Season":"2013/2014",
"quality":""
},
{
"Team":"Paris Saint Germain",
"VS":"Benfica",
"Home":"Ja",
"Date":"2013-10-02",
"League":"Champions League",
"Result":"3-0",
"City/Country":"Paris/France",
"URL":"https://www.youtube.com/watch?feature=player_detailpage&v=W7VyshZkZO0#t=34",
"start":"0:34",
"Season":"2013/2014",
"quality":""
},
{
"Team":"Paris Saint Germain",
"VS":"Benfica",
"Home":"Ja",
"Date":"2013-10-02",
"League":"Champions League",
"Result":"3-0",
"City/Country":"Paris/France",
"URL":"https://www.youtube.com/watch?feature=player_detailpage&v=W7VyshZkZO0#t=66",
"start":"1:07",
"Season":"2013/2014",
"quality":""
}, {
"Team":"Sweden",
"VS":"France",
"Home":"Ja",
"Date":"2012-06-19",
"League":"Euro Championship",
"Result":"2-0",
"City/Country":"Kiev/Ukraine",
"URL":"http://www.youtube.com/watch?v=DDbOmp9_Nn4#t=183",
"start":"3:04",
"Season":"2011/2012",
"quality":""
}
];
var base=[];
var app = angular.module('app', []);
app.controller('goalList', function($scope, $http) {
$scope.goals = [];
//$scope.goals = res.data;
var data = json;
for (var i=0, len=data.length; i<len; i++) {
base.push({
'id' : i,
'Team':data[i]['Team'],
'VS':data[i]['VS'],
'Home':data[i]['Home'],
'Date':new Date(data[i]['Date']),
'League':data[i]['League'],
'Result':data[i]['Result'],
'Country':data[i]['City/Country'],
'URL':data[i]['URL'],
'vidid':data[i]['URL'],
'start' : data[i]['start'],
'Season' : data[i]['Season'],
'Thumb' : "http://img.youtube.com/vi/mqdefault.jpg"
});
}
$scope.goals = base;
$scope.leagues =_.chain($scope.goals).pluck("League").uniq().sortBy().value();
$scope.teams =_.chain($scope.goals).pluck("Team").uniq().sortBy().value();
$scope.seasons =_.chain($scope.goals).pluck("Season").uniq().sortBy().value();
$scope.country =_.chain($scope.goals).pluck("Country").uniq().sortBy().value();
$scope.clearFilters = function(){
$scope.selectedLeague = undefined;
$scope.selectedTeams = undefined;
$scope.selectedSeason = undefined;
$scope.selectedCountry = undefined;
};
});
您可以通过使用自定义过滤器来实现这一点,该过滤器将接受具有过滤条件的项作为
app.filter('customFilter', function () {
return function (items, filterData) {
if(filterData == undefined)
return items;
var keys = Object.keys(filterData);
var filtered = [];
var populate = true;
for (var i = 0; i < items.length; i++) {
var item = items[i];
populate = true;
for(var j = 0; j < keys.length ; j++){
if(filterData[keys[j]] != undefined){
console.log(filterData[keys[j]]+ " "+item[keys[j]]);
if(filterData[keys[j]].length == 0 || filterData[keys[j]].contains(item[keys[j]])){
populate = true;
}else{
populate = false;
break;
}
}
}
if(populate){
filtered.push(item);
}
}
return filtered;
};
});
查看JSFIDDLE
相关文章:
- 选择.js destroy() 方法更改选择值
- 选择.js在“onItemAdd”回调中获取更多数据
- 选择.js:克隆元素和 destroy() 问题
- 使用 AJAX 添加选择选项以选择.js
- 选择.js事件 - 不起作用
- 选择JS自动完成似乎不起作用
- 选择“JS使用数组作为源”
- 选择.js Rails 和远程数据加载 – 返回逗号分隔的字符串而不是数组
- 如何更改选择.js下拉列表的占位符
- 选择.js性能
- 选择.js并验证 jquery
- 给人留下深刻印象的另一种选择.js
- 如何获取选择 JS 树节点时的祖先
- 如何滑动切换选择.js下拉列表
- 使用JS或JQuery,将所选内容中的所有内容从一个列表移动到“;选择“;使用jQuery's列表选择.js
- 选择 JS 菜单在服务器中的行为与在我自己的桌面中的行为不同
- 选择JS插件通过Node JS安装插件
- 基于单选按钮选择JS显示不同的表id
- 我如何才能丑陋地选择JS
- 延迟选择.js搜索过滤器