在兩個示波器之間的Ng點擊過濾器

我是Angular.js的新手，所以我不確定這是否是正確的方法。我有兩個用於顯示2組按鈕的示波器。第二組應該依賴於我在第一組中點擊的按鈕。在兩個示波器之間的Ng點擊過濾器

<!-- 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>

我意識到myFilter在NG-點擊是黑客攻擊的一位，但除了我不能讓它過濾的NG-結果重複。 myFilter變量會返回正確的結果{target: 'roof'}（對於第一個按鈕）。我是否正確地假設這是因爲第一組按鈕與第二組按鈕的範圍不同？

來源

2016-10-20 Paweł Durczok

您在這裏並沒有真正使用2個不同的示波器。如果你已經使用了2個不同的控制器或不同的指令，那麼你會得到2個不同的範圍。您正在使用在整個角度應用程序中常見的$ rootScope。

myFilter不工作的原因是因爲angular無法正確解析ng表達式，所以最好寫一個方法（暴露給scope）並在方法中更改myFilter的值。這是一個很好的做法，也是一個更好的方法來實現你正在嘗試做的事情。

HTML

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

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

檢查這個小提琴here，我已經創建了一個基於代碼的工作示例。

編輯

即使你target變量是一個數組不應該有任何問題，因爲Anguar的管道過濾器會照顧它。我已更新並創建了一個新的小提琴來展示它，請檢查它here。

因此，如果target是一個有兩個值的數組 - 「'roof'，'attic']，那麼這個特定的元素將顯示在兩個按鈕上。

來源

2016-10-20 15:16:35

這工作出色！謝謝:) –

還有一件事我很想知道。如果「目標」具有多個值，該怎麼辦？說'目標：['between_rafters'，'between_rafters_counter_batten'，'between_rafters_calibel'，'between_rafters_thermal_laminate']，'？ –

對不起，最後一件事情:) –

在兩個示波器之間的Ng點擊過濾器

回答

相關問題