条件付き角度ngリピートフィルター？

Question

私は角型のアプリを開発しており、ng-repeatを使用して顧客の結果を表に表示したいと考えています。 ng-filterをng-modelに接続して結果を検索することはできますが、結果を変更するためにチェックボックスをどのように追加できるかを知りたいと思います。例えば

、私はこのデータを持っていると言う：

[{ 
    "name": "Bob Smith", 
    "percent": 100, 
    "notes": "100 percent complete" 
}, 
{ 
    "name": "Sally Brown", 
    "percent": 75, 
    "notes": "Not yet at 100 percent" 
} 
    .... 
] 

私の現在のアプリは、ユーザーがフィルタを定期的にNG・リピートのように、ここでは何のためでしょう検索できます：

<input ng-model="query.$"> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Percent</th> 
     <th>Notes</th> 
    </tr> 
    <tr ng-repeat="customer in customers | filter:query"> 
     <td>{{ customer.name }}</td> 
     <td>{{ customer.percent }}</td> 
     <td>{{ customer.notes }}</td> 
    </tr> 
</table> 
<input ng-model="query.completed" type="checkbox"> Show Completed Jobs 

しかし、私は、 "100％の顧客を表示する"と言う側のチェックボックスを希望します。私は、フィルタ機能を書いてみました：

.filter('show100percent', function() { 
    return function(items, showcompleted) { 
     var jobs = [] 
     items.forEach(function(item) { 
      if (showcompleted == false) { 
       if (item.percent < 100) { 
        jobs.push(item) 
       } 
      } else { 
       jobs.push(item) 
      } 
     }) 
     return jobs 
    } 
}) 

しかし、そうすることは、テキストボックス

<tr ng-repeat="customer in customers | show100percent:query.completed"> 

と定期的なフィルターの上に私のフィルタを追加することからの入力を受け付けるから私のアプリはちょうど空白のセットを示して停止しますの結果：

<tr ng-repeat="customer in customers | show100percent:query.completed | filter:query"> 

私は何か間違っていますか？入力ボックスからデータを検索可能にするにはどうすればよいですか？チェックボックス、選択、2番目の入力ボックス、または他の種類のフォーム要素で結果を変更するにはどうすればよいですか？

Answer 1

異なる$scope変数を使用して、チェックボックスとカスタムフィルタで割り当てることができます。現在は未定義として送信されています。だから、フィルタリングは、チェックボックスにも

$scope.showcompleted = false; 

    <tr ng-repeat="customer in customers | show100percent:showcompleted | filter:query"> 

が起こる

と私は少し

app.filter('show100percent', function() { 
    return function(items, showcompleted) { 
    var jobs = [] 
    items.forEach(function(item) { 
     if (showcompleted == true) { 
     if (item.percent == 100) { 
      jobs.push(item) 
     } 

     } else { 
     jobs.push(item) 
     } 
    }) 
    return jobs 
    } 
}) 

DEMO

Answer 2

があなたに%に属性を追加するには、フィルタを変更しているしませんクエリオブジェクトは、モデルに合わせて、そのチェックボックスがオンになっているとき、それは次のようになります。

<input ng-model="query.$"> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Percent</th> 
     <th>Notes</th> 
    </tr> 
    <tr ng-repeat="customer in customers | filter:query"> 
     <td>{{ customer.name }}</td> 
     <td>{{ customer.percent }}</td> 
     <td>{{ customer.notes }}</td> 
    </tr> 
</table> 
<input ng-model="query.percent" type="checkbox" ng-true-value="100" ng-false-value> Show Completed Jobs 

plunker：http://plnkr.co/edit/uU6ibIDaS3OcYnZ3TqkR?p=preview

ng-true-value="100"と空 ng-false-valueディレクティブを使用する]チェックボックスでそれを達成するために

{ 
    $: FREE_TEXT, 
    percent: 100 
}