如何使这个过滤器更好答案

【问题标题】：How to make this filter better如何使这个过滤器更好
【发布时间】：2015-07-21 12:28:33
【问题描述】：

我想让ng-repeat 运行从select 输入中选择的课程。

为此，我使用了自定义的filter。每当arrayFilter 未定义或arrayFilter 为空时，我已将arrayFilter 硬编码为所有值，否则arrayFilter 包含从select 输入中选择的值

Here 是 plunker 演示

有没有更好的方法来实现这个功能？

关于我在代码中使用filter 的方式的任何说明，请参考 here 到 InviS 给出的答案

JS sn-p

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;
          });  
}; 
});

提前致谢。

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案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>

【讨论】：