我想让 ng-repeat 为从 select 输入中选择的类(class)运行。
为此，我使用了自定义的过滤器。
每当 arrayFilter 未定义或 arrayFilter 为空时，我都会将 arrayFilter 硬编码为所有值，否则 arrayFilter由从select输入
<强> Here 是plunker 演示
有没有更好的方法来实现这个功能？
有关我在代码中使用 filter 的方式的任何说明，请参阅 here InviS给出的答案
JS 代码片段
angular.module("myApp",[])
.controller("mainctrl",function($scope){
$scope.courses = [{"name":"Java"},{"name":"Python"},{"name":"Nodejs"}] ;
$scope.caller = function(){
console.log($scope.inputvalue);
};
})
.filter('inArray', function($filter){
return function(list, arrayFilter, element){
if(!angular.isUndefined(arrayFilter)){
if(arrayFilter.length ){
}
else{
arrayFilter = ["Java","Python","Nodejs"]
}
}
else{
arrayFilter = ["Java","Python","Nodejs"]
}
return $filter("filter")(list, function(listItem){
return arrayFilter.indexOf(listItem[element]) != -1;
});
};
});
提前致谢。
最佳答案
您可以选择在数组未定义或为空时返回 true，而不是将 arrayFilter 设置为具有这些值的预定义数组:
.filter('inArray', function($filter) {
return function(list, arrayFilter, element) {
return $filter("filter")(list, function(listItem) {
return !arrayFilter || !arrayFilter.length || arrayFilter.indexOf(listItem[element]) !== -1;
});
};
});
angular.module("myApp", [])
.controller("mainctrl", function($scope) {
$scope.courses = [{
"name": "Java"
}, {
"name": "Python"
}, {
"name": "Nodejs"
}];
$scope.caller = function() {
console.log($scope.inputvalue);
};
})
.filter('inArray', function($filter) {
return function(list, arrayFilter, element) {
return $filter("filter")(list, function(listItem) {
return !arrayFilter || !arrayFilter.length || arrayFilter.indexOf(listItem[element]) !== -1;
});
};
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>COi</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-animate.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.btn-warning {
background-color: white !important;
color: black !important;
}
.btn-warning:hover {
background-color: white !important;
}
</style>
</head>
<body ng-controller="mainctrl">
<select class="selectpicker btn-default " multiple ng-change="caller();" ng-model="inputvalue">
<option>Java</option>
<option>Python</option>
<option>Nodejs</option>
</select>
<li ng-repeat="course in courses | inArray:inputvalue:'name' ">
{{course.name}}
</li>
<script type="text/javascript" src="bootstrap-select.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>关于angularjs - 如何让这个过滤器变得更好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30160256/