或者使用Angular JS复选框

时间:2013-12-27 19:05:49

标签: javascript angularjs checkbox

我正在使用多个复选框来使用angularjs过滤属性。目前,我使用自定义过滤器来显示某种类型的所有属性。我有多个复选框,当您检查每个新复选框时,它会过滤结果。

目前,您检查的每个新复选框缩小您的搜索(即哪些属性都是乡村和沿海),我想拓宽搜索(即哪些属性是农村或沿海)。我真的很陌生。

这是我的应用:

propertyApp.controller('PropertyListControl', function ($scope) {
$scope.properties = [
    {
        title: "Sharrow Bay Hotel",
        location:['rural', 'coastal']
    },
    {
        title: "The Royal Oak Inn",
        location:['rural']
    },
    {
        title: "Scale Hill Cottages",
        location:['urban']
    },
];

$location = {}

// Currently using this great custom filter:
}).filter('filteredLocation', function() {
    return function(properties, location) {
        var result = properties.slice(); // copy array
            angular.forEach(location, function(value, key) {
                if(value) {
                    for(var index = 0; index < result.length; index++) {
                        property = result[index];
                            if(property.location.indexOf(key) == -1) {
                            result.splice(index--,1);
                            }
                        }
                    }
                });
                return result;
            };
        });

我的复选框:

<label><input type="checkbox" ng-model="location.rural"/>Rural</label>
<label><input type="checkbox" ng-model="location.urban"/>Urban</label>
<label><input type="checkbox" ng-model="location.coastal"/>Coastal</label>

1 个答案:

答案 0 :(得分:1)

该过滤器从您的所有位置开始:

var result = properties.slice();

并删除任何与您的测试不匹配的内容:

result.splice(index--,1);

因此,它表现得像一个“和”,因为在你的例子中,任何没有“沿海”的东西都会被删除,然后任何没有“乡村”的东西都会被删除。因此,剩下的唯一项目是符合这两个条件的项目。

要把它变成“或”过滤器,我会从一个空数组开始:

var result = []; 

并在匹配时添加结果(因此任何匹配的测试都将添加):

result.push(property);  

为了避免重复,我还切换了循环,因此外部循环现在覆盖属性列表,内部循环遍历要过滤的位置列表。然后,一旦我们发现属性与任何位置匹配,我们就可以从内循环中止。

这是整个功能:

.filter('filteredLocation', function() {
    return function(properties, location) {
      var result = []; 
      for(var index = 0; index < properties.length; index++) {  
         var added = false;
         angular.forEach(location, function(value, key) {         
           if(value && !added) {
              property = properties[index];
              if(property.location.indexOf(key) != -1) {
                 result.push(property);  
                 added = true; // Mark as added so we don't add duplicates
              }       
          }
       })
   };
   return result;
};

demo fiddle