Угловые (V1.5.3) фильтры

Question

В настоящее время я работаю на странице, где я хочу, чтобы там было две части информации - массив секторов, который при нажатии на конкретный сектор будет фильтровать список под ним в терминах связанных с ним проектов.

Я пытаюсь достичь этого, отфильтровывая объекты, используя функцию $ filter в Angular. Но по какой-то причине ничего не происходит, когда я нажимаю соответствующий сектор. Он остается неизменным.

Вот изображение (очень простой макет), чтобы показать вам: Trying to filter a list.

У меня нет каких-либо ошибок в моей консоли, я думаю, что это может быть нулевое значение на мой контроллер, но я не определенно, любая помощь будет оценена по достоинству.

Вот мои массивы, которые находятся в моем контроллере (сейчас ...) наряду с общественной функцией и области видимости переменных, которые будут использоваться в HTML:

$scope.sectors = [ 
{"id": 0, "name": "Branding", "image": "assets/01_WORK_TILE.jpg"}, 
{"id": 1, "name": "Retail Design", "image": "assets/WORK_RETAILDESIGN.jpg"}, 
{"id": 2, "name": "Food & Beverage Design", "image": "assets/WORK_F&B.jpg"}, 
{"id": 3, "name": "Graphic Communication", "image": "assets/06_WORK_TILE.jpg"}, 
{"id": 4, "name": "Masterplanning", "image": "assets/WORK_MASTERPLANNING.jpg"}, 
{"id": 5, "name": "Public Spaces", "image": "assets/WORK_PUBLICSPACES.jpg"}, 
{"id": 6, "name": "Strategic Insights", "image": "assets/WORK_STRATEGICINSIGHTS.jpg"}, 
{"id": 7, "name": "Signage & Wayfinding", "image": "./assets/WORK_SIGNAGE&WAYFINDING.jpg"} 

];

$scope.projects = [ 
{"id": 0, "name": "UK Coffee week", "image": "cw-avatar", "desc": "Using coffee to do good!", "sector": "Branding"}, 
{"id": 1, "name": "Lexicon", "image": "lexicon-avatar", "desc": "Transforming a Town.", "sector": "Branding"}, 
{"id": 2, "name": "Ajmal", "image": "ajmal-avatar", "desc": "Fragrance for everyone.", "sector": "Retail Design"}, 
{"id": 3, "name": "Aelia", "image": "aelia-avatar", "desc": "A World first for travel retail.", "sector": "Retail Design"}, 
{"id": 4, "name": "Amuse", "image": "amuse-avatar", "desc": "Developing a World of beauty.", "sector": "Retail Design"}, 
{"id": 5, "name": "Johnnie Walker", "image": "jwalker-avatar", "desc": "A new arrival at Amsterdam Airport.", "sector": "Food & Beverage Design"}, 
{"id": 6, "name": "Fine Foods", "image": "finefoods-avatar", "desc": "?", "sector": "Graphic Communication"}, 
{"id": 7, "name": "Nice Duty Free", "image": "nice-avatar", "desc": "?", "sector": "Graphic Communication"}, 
{"id": 8, "name": "Al Maryah Island", "image": "maryah-avatar", "desc": "?", "sector": "Signage & Wayfinding"}, 
{"id": 9, "name": "British Land", "image": "britishland-avatar", "desc": "Superior signage and wayfinding.", "sector": "Signage & Wayfinding"} 

];

$scope.currentSector = null; 

function setCurrentSector(sector) { 
$scope.currentSector = sector; 
} 

$scope.setCurrentSector = setCurrentSector; 

А вот разметка в моем файле представления:

<div layout="column" flex> 
    <ul ng-controller="WorkController" ng-repeat="sector in sectors"> 
     <li style="list-style: none; font-family: portland-bold-font;"> 
      <a ng-click="setCurrentSector(sector);">{{ sector.name }}</a> 
     </li> 
    </ul> 
</div> 

<div class="animation-element slide-up" style="font-size: 0;"> 
    <p style="height: 25%; text-align: center; background: black; font-family: portland-bold-font; color: white; margin: 0; padding: 0%; font-size: 2.5vw;" ng-cloak> 
    Lorem ipsum dolor sit amet, consectetur<br /> adipisicing elit, sed do eiusmod tempor<br /> incididunt ut labore et dolore 
    </p> 
</div> 

<div layout="column" style="background:white;"> 
    <ul ng-controller="WorkController" ng-repeat="project in projects | filter:currentSector.name"> 
     <li style="list-style: none; font-family: portland-bold-font;">{{ project.name }}</li> 
    </ul> 
</div> 

Answer 1

Посмотрите этот plunker: https://plnkr.co/edit/fwXN2YjR84iOfp5wuQO1?p=preview

Как я уже сказал в комментарии, вы заявляете дважды нг-ко ntroller в двух разных частях dom. В угловом контроллере нет доступа к сервису, поэтому у вас есть два разных контроллера, и ваш сектор var не «видит» ваш фильтр.

Я инкапсулировать DOM в тело и объявить контроллер на теле:

<body ng-controller="MainCtrl"> 
    ... 
</body> 

Answer 2

Вы должны указать поле для фильтрации:

<ul ng-repeat="project in projects | filter: { sector: currentSector.name}"> 
    <li style="list-style: none; font-family: portland-bold-font;">{{ project.name }}</li> 
</ul>