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

有没有可能以其他方式做到这一点？？？

4

3 回答 3

4

您可以使用 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

于 2012-12-20T15:47:54.377 回答
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) {
       ...
于 2012-12-20T22:37:32.320 回答
1

您没有正确使用它的原因可能是因为您没有为您的用例使用正确的 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>

这就对了。现在你可以走了。希望这可以帮助。如果您真的想使用复选框，那么它会比这更复杂一些。

于 2012-12-20T14:40:35.957 回答