2つのスコープ間でのNg-clickフィルタ

Question

私はAngular.jsを初めて利用していますので、これが適切なアプローチかどうかはわかりません。私は、2セットのボタンを表示するために使用される2つのスコープを持っています。 2番目のセットは、最初のセットでクリックしたボタンに依存する必要があります。

<!-- Insulation placement --> 
    $rootScope.roofs = [ 
    { 
     type: 'roof', 
     label: 'Pitched Roof' 
    }, 
    { 
     type: 'attic', 
     label: 'Floor of Attic' 
    } 
    ]; 


<!-- Roof insulation types --> 
    $rootScope.roofInsulation = [ 
    { 
     target: 'roof', 
     type: 'between_rafters', 
     label: 'Between Rafters' 
    }, 
    { 
     target: 'roof', 
     type: 'between_rafters_counter_batten', 
     label: 'Between Rafters With A Counter Batten' 
    }, 
    { 
     target: 'roof', 
     type: 'between_rafters_calibel', 
     label: 'Between Rafters With Calibel' 
    }, 
    { 
     target: 'roof', 
     type: 'between_rafters_thermal_laminate', 
     label: 'Between Rafters With Thermal Laminate' 
    }, 
    { 
     target: 'attic', 
     type: 'test', 
     label: 'Test' 
    } 
    ]; 

と私のHTML

<div ng-repeat="types in roofs"> 

    <button ng-click="myFilter = {target: '{{types.type}}'}" class="btn btn-primary" type="button">{{types.label}}</button> 

</div> 

<div> 

    <button ng-repeat="variants in roofInsulation | filter: myFilter" class="btn btn-secondary" type="button">{{variants.label}}</button> 

</div> 

私はNG-クリックでmyFilterはハックのビットですが、それはさておき、私はそれがng-の結果をフィルタリングするために得ることができないことを実現繰り返す。 myFilter変数は、適切な結果{target: 'roof'}（最初のボタン用）を返します。最初のボタンセットが2番目のボタンセットとは異なるスコープに入っているため、正しいと思われますか？

Answer 1

ここでは2つの異なるスコープを実際に使用していません。 2つの異なるコントローラーまたは異なるディレクティブを使用していた場合は、2つの異なるスコープがあります。あなたは、角度アプリ全体で共通の$ rootScopeを使用しています。

角度がng-clickの式を正しく解析できないため、myFilterが機能しないのは、（スコープに公開された）メソッドを作成してメソッドのmyFilterの値を変更する方が良いことです。あなたがやろうとしていることを達成するための良い方法と同様、良い練習です。

HTML

<button ng-click="setFilter(types)" class="btn btn-primary" type="button">{{types.label}}</button> 

JS

$rootScope.setFilter = function(types) { 
    $rootScope.myFilter = {target: types.type}; 
} 

このフィドルhereをチェックし、私はあなたのコードに基づいて作業例を作成しました。あなたのtarget変数がAnguarのパイプフィルターは、それの世話をするためにすべての問題があってはならない配列であっても

EDIT

。 新しいフィドルを表示して作成しました。確認するにはhereにチェックしてください。

ターゲットが2つの値 - [屋根、屋根裏]の配列である場合、その特定の要素が両方のボタンに表示されます。