AngularJS 1 ng-repeat 中的多个真/假过滤器

Question

有一个“项目”可以让我学得最好。我正在通过制作高尔夫球场列表应用程序来学习 Angular 1.x。 我有一个用于所有数据的 json 文件。这个应用程序有一个通用的文本搜索，并且可以设置8个开关来过滤州的区域和高尔夫球场的类型。我的文本搜索工作得很好。我破解了一些代码，为“课程类型”制作了一个过滤器，它确实有效。但是，一旦我尝试制作第二个过滤器，它就会损坏。我将在下面发布我的代码，但它可能是hacky。

将八个真/假开关组合到一个或多个过滤器中并将其与文本搜索结合起来的最佳方法是什么？我首先计算过滤器，然后对过滤后的结果进行文本搜索。

html ng-repeat（如果我取出第二个“私人”过滤器，公共过滤器可以工作：

<div ng-repeat="course in items | searchFor:data.searchString | orderBy: 'name' | publicFilter:data.publicCourse | privateFilter:data.privateCourse " >

过滤器（第一个独立工作）：

 .filter('publicFilter', function(){

      return function(arr, publicCourse){
           var result = [];
                if(publicCourse == true ){
                     angular.forEach(arr, function(item){
                         if(item.coursetype.toLowerCase().indexOf('public') !== -1){result.push(item);}
                     });
                     return result;
                };
      }
 })

 .filter('privateFilter', function(){

      return function(arr, privateCourse){
           var result = [];
                if(privateCourse == true ){
                     angular.forEach(arr, function(item){
                         if(item.coursetype.toLowerCase().indexOf('private') !== -1){result.push(item);}
                     });
                     return result;
                };
      }
 })

Answer 1

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
    // Data object
    $scope.courses = [
        {name:'Course 1', courseType:'Public', region:'Northern'},
        {name:'Course 2', courseType:'Public', region:'Northern'},
        {name:'Course 3', courseType:'Private', region:'Northern'},
        {name:'Links 4', courseType:'Private', regionmode:'Northern'},
        {name:'Links 5', courseType:'Private', region:'Northern'},
        {name:'Links 6', courseType:'Public', region:'Southern'},
        {name:'Links 7', courseType:'Public', region:'Southern'},
        {name:'Links 8', courseType:'Military', region:'Southern'},
        {name:'Course 9', courseType:'Private', region:'Southern'},
        {name:'Course 10', courseType:'Private', region:'Southern'}
    ];
    // Filter defaults
    $scope.Filter = new Object();
    $scope.Filter.courseType = {'public':'public',
                            'private':'private',
                            'military': 'military'
                        };
    $scope.Filter.region = {'northern':'northern',
                            'southern':'southern'
                        };
    // Default order
    $scope.OrderFilter = 'region';
});

// Global search filter
app.filter('searchFilter',function($filter) {
        return function(items,searchfilter) {
             var isSearchFilterEmpty = true;
              angular.forEach(searchfilter, function(searchstring) {   
                  if(searchstring !=null && searchstring !=""){
                      isSearchFilterEmpty= false;
                  }
              });
        if(!isSearchFilterEmpty){
                var result = [];  
                angular.forEach(items, function(item) {  
                    var isFound = false;
                     angular.forEach(item, function(term,key) {                         
                         if(term != null &&  !isFound){
                             term = term.toString();
                             term = term.toLowerCase();
                                angular.forEach(searchfilter, function(searchstring) {      
                                    searchstring = searchstring.toLowerCase();
                                    if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
                                       result.push(item);
                                        isFound = true;
                                    }
                                });
                         }
                            });
                       });
            return result;
        }else{
        return items;
        }
    }
});

body{
    font-family:calibri,arial;
    line-height: 1em;
}
h2{
    font-size:14pt;
    font-weight:bold;
}
li{
    font-family:courier;
}

th{
    font-weight:bold;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div  ng-controller="mainController">
    <label>Search: <input ng-model="searchText"></label>
        <h2>Course Type</h2>
        <label>Public</label>
        <input type="checkbox" ng-model="Filter.courseType.public" ng-true-value="public"  ng-false-value="!public" />&nbsp;
        <label>Private</label>
        <input type="checkbox" ng-model="Filter.courseType.private" ng-true-value="private"  ng-false-value="!private" />&nbsp;
        <label>Military</label>
        <input type="checkbox" ng-model="Filter.courseType.military" ng-true-value="military"  ng-false-value="!military" />&nbsp;
        <hr />
        <h2>Region</h2>
        <label>Northern</label>
        <input  type="checkbox" ng-model="Filter.region.northern" ng-true-value="northern"  ng-false-value="!northern" />&nbsp;
        <label>Southern</label>
        <input  type="checkbox" ng-model="Filter.region.southern" ng-true-value="southern"  ng-false-value="!southern" />
        <hr />
        <h2>Results:</h2>
        <table width="100%" cellpadding="5">
          <thead>
            <tr style="text-align:left">
                <th ng-click="OrderFilter='name'">Name</th>
                <th ng-click="OrderFilter='courseType'">Course Type</th>
                <th ng-click="OrderFilter='region'">Region</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="course in courses | filter:searchText | searchFilter:Filter.name | searchFilter:Filter.courseType | searchFilter:Filter.region | orderBy:OrderFilter">
                <td>{{course.name}}</td>
                <td>{{course.courseType}}</td>
                <td>{{course.region}}</td>
            </tr>
          </tbody>
        </table>
    </div>
</div>

这是上面的一个 jsfiddle：http://jsfiddle.net/j6cgovjh/2/

披露：这段代码是基于修改别人的 jsfiddle - http://jsfiddle.net/w01edye9/（我在其他小改动中添加了一个搜索框）。

Answer 2

在 Angular 1.5.5 中，我必须在双引号内用单引号格式化输入的真值和假值才能正常工作：

 <input type="checkbox" ng-model="Filter.courseType.public" ng-true-value="'public'" ng-false-value="'!public'" />