Question

View By :
<input type="checkbox" name="filter" />All
<input type="checkbox" name="filter" />name
<input type="checkbox" name="filter" />type

<span class="displayphones">{{ phone | filter:? }}</span>

这里我有3个复选框，默认情况下它必须显示全部。选择复选框时，它

应显示适当的结果，但我不知道如何将复选框值传递给过滤器而不重复像这样的ng-model

View By :
<input type="checkbox" name="filter" ng-model="all" />All
<input type="checkbox" name="filter" ng-model="name" />name
<input type="checkbox" name="filter" ng-model="type" />type

<span class="displayphones">{{ phone | filter:all:name:type }}</span>

是否有可能以其他方式做到这一点???

Answer 1

您可以使用data-ng-true-value来完成您想要的任务。它甚至可以用于复选框：

<input type="checkbox" data-ng-model="myCheckboxGroup" data-ng-true-value="1" /><br >
<input type="checkbox" data-ng-model="myCheckboxGroup" data-ng-true-value="2" /><br >
<input type="checkbox" data-ng-model="myCheckboxGroup" data-ng-true-value="3" /><br >

{{myCheckboxGroup}}

以下是相关文档：http://docs.angularjs.org/api/ng.directive:input.checkbox

Answer 2

控制器：

function MyCtrl($scope) {
   $scope.filters = [ 
      {name: 'All',  selected: false},
      {name: 'name', selected: false},
      {name: 'type', selected: false}];    
}

查看：

<div ng-controller="MyCtrl">
   <div ng-repeat="filter in filters">
      <input type="checkbox" ng-model="filter.selected" name="filter">{{filter.name}}
   </div>
   debug: {{filters}}
   <br><span class="displayphones">{{ phone | customFilter:filters }}</span>

我不知道您的手机数据是什么样子，所以过滤器的实现留给了读者：

myApp.filter('customFilter', function() {
    return function(phone, filters) {
       ...

Answer 3

您没有做到正确的原因可能是因为您没有为您的用例使用正确的UI元素。正确的UI元素将是无线电输入而不是复选框。无线电组是切换，而复选框则不是。

如果您使用无线电输入，则很容易实现：

<input type="radio" ng-model="filterType" value="All" />All
<input type="radio" ng-model="filterType" value="name" />name
<input type="radio" ng-model="filterType" value="type" />type

<span class="displayphones">{{ phone | filter:filterType }}</span>

就是这样。现在你很高兴。希望这可以帮助。如果你真的想使用复选框，那么它比这复杂一点。

如何使用角度过滤器根据复选框值过滤文本？

3 个答案: