0

私はAngularが初めてで、その問題に頭を悩ませることはできません。

次のように、それぞれ一意の値を持ついくつかのチェックボックスがあります。

<label ng-repeat="c in classes">
    <input type="checkbox"  ng-model="query" ng-true-value='{{c.name}}'>
    <span>{{c.name}}</span>
</label>

次に、次のように card.name のような特定の値でフィルタリングする必要がある div のセットがあります。

<div ng-repeat="card in cards | filter:query">
  <h2>{{card.name}}</h2>
  <p><em>{{card.text}}</em></p>
</div>

値が「Peter」のチェックボックスをオンにすると、card.name=Peter のすべてのカードが表示されます。チェックボックス「Peter」と「John」が表示されると、card.name=Peter と =John のすべてのカードが表示されます。どうすればこれを実現できますか?

一般的な概念/マークアップの質問だと思います...

4

1 に答える 1

1

2 つの異なる変数を持つ必要はありません。実際、それが問題です。Angular はそれらを結び付ける方法を知りません。

フィルターは、特定の値に設定された特定のキーについて、オブジェクトを深く調べることができます。私の例では、フィルターはこの特定の属性を探し、 すべてを同じオブジェクトに保持するようselectedに設定されているものだけを表示して、すべてを結び付けます。true

<label ng-repeat="c in classes">
    <input type="checkbox"  ng-model="c.selected" />
    <span>{{c.name}}</span>
</label>

<div ng-repeat="card in classes | filter:{selected:true}">
    <h2>{{card.name}}</h2>
    <p><em>{{card.text}}</em></p>
</div>

データは次のとおりです。

$scope.classes = [{
    name: "John",
    text: "Something about John"
},{
    name: "Peter",
    text: "Something about Peter"
}];

注:selected各オブジェクトを選択すると、各オブジェクトに属性が追加されます。これが、フィルタリングするキーです。

作業例: http://jsfiddle.net/TheSharpieOne/y2UW7/

アップデート：

質問を読み直した後、同じ名前のカードが複数あるように見えました。別のアプローチが必要になります。

この場合、複数の変数、チェックボックスのリストと「カード」のリストが必要です。どのボックスが選択されているかを追跡するための var も必要です。

この場合、1 つのチェックボックスで多くの「カード」が変更される可能性があるため、関数を使用してリストをフィルタリングします。

例: http://jsfiddle.net/TheSharpieOne/y2UW7/1/

于 2013-08-26T04:11:42.693 に答える