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

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-模型这样

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>

是有可能做到这一点在其他一些办法？？？

来源

2012-12-20 Prashanth Suriyanarayanan

为什么3 ng模型有问题？通常，在Angular中，每个表单元素都有自己的ng模型。 –

实际上有3 ng模型不是我的问题。我想将所有的ng-model值作为一个数组传递。 –

你可以使用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-20 15:47:54

否这样一个值将被另一个值更新。它几乎就像单选按钮。我需要一些其他方式。 –

是否有可能获得用户使用该单一数据ng模型选择的所有值？ –

不，数据ng模型只是一个特定的值，而不是一个数组。 –

你没有把握正确的原因可能是你没有为你的用例使用正确的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-20 14:40:35 ganaraj

不，我想使用复选框。别无退路。 –

控制器：

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-20 22:37:32

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

回答

相关问题