Question

我通过一个＆＃34;项目来学习最好的＃34;继续努力。我通过制作高尔夫球场列表应用程序来学习角度1.x. 我有一个json文件我正在使用所有数据。这个应用程序有一个普通的文本搜索，8个开关可以设置过滤州的区域和高尔夫球场的类型。我的文本搜索效果非常好。我修改了一些代码来为＆＃34;课程类型＆＃34;制作单个过滤器。它确实有效。但是一旦我尝试制作第二个过滤器就会中断。我将在下面发布我的代码，但这可能是hacky。

将EIGHT真/假切换放入过滤器或过滤器的最佳方法是什么，并将其与文本搜索结合起来？我首先计算过滤器，然后文本搜索过滤结果。

html ng-repeat（如果我拿出第二个＆＃34;私有＆＃34;过滤器，公共一个有效：

<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

38,39

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

以上是上述内容：http://jsfiddle.net/j6cgovjh/2/

披露：此代码基于重新修改其他人的jsfiddle - http://jsfiddle.net/w01edye9/（我在其他小修改中添加了搜索框）。

Answer 2

在angular 1.5.5中，我必须使用双引号内的单引号格式化输入的true和false值，以使其起作用：

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

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

2 个答案: