Фильтр Ng-click между 2 областями

Question

Я новичок в Angular.js, поэтому я не уверен, что это правильный подход. У меня есть две области, которые используются для отображения 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> 

Я понимаю, что myFilter в нг-клик немного рубить, но помимо этого я не могу получить его, чтобы отфильтровать результаты ng- повторение. Переменная myFilter возвращает правильный результат {target: 'roof'} (для первой кнопки). Правильно ли я предполагаю, что это связано с тем, что первый набор кнопок отличается от второго?

Answer 1

Вы не используете здесь 2 разных области. Если бы вы использовали 2 разных контроллера или разные директивы, то у вас было бы 2 разных области. Вы используете $ rootScope, который является общим для всего углового приложения.

Причина, по которой myFilter не работает, заключается в том, что угловой не способен правильно разобрать выражение в ng-click, лучше написать метод (открыт для области) и изменить значение 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, я создал рабочий пример, основанный на коде.

EDIT

Даже если target переменная является массивом там не должно быть проблемой, поскольку труба фильтра Anguar будет заботиться о нем. Я обновил и создал новую скрипку, чтобы показать ее, отметьте ее here.

Поэтому, если цель - это массив, имеющий 2 значения - ['roof', 'attic'], этот конкретный элемент будет показан для обеих кнопок.