Question

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

为此，我使用的是自定义filter。每当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;
          });  
}; 
});

提前致谢。

Answer 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>

如何使这个过滤器更好

1 个答案: