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 に答える