Я не совсем понимаю фильтрацию в угловом контроллере?

Question

Я читал некоторые угловые документы и видел некоторые примеры, но я до сих пор не ясно, как я могу фильтровать, как мне нужно. Надеюсь, некоторые из них помогут мне разобраться в этом.

У меня есть API, который будет получать список записей, имеющих статус Open, Closed, Pending, Urgent. Идея заключается в том, что я верну все записи и отправлю их на страницу. Я также получаю список этих статусов, поэтому они заполняются в раскрывающемся списке. Когда загружается страница, я хотел бы сначала отобразить открытые записи, а затем переключиться на другой статус записи, когда пользователь выбирает один из раскрывающегося списка.

Итак, я получаю, как вы можете подписать массив отфильтрованных элементов, таких как this.filteredArray = filterFilter(this.array, {status:'Open'});, но если я использую это в своих ng-repeat, другие записи будут недоступны, потому что у этого массива будут только записи «Открыть» и ничего больше. ...верный?

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

Я пробовал и пример <span ng-repeat="vm in ctrl.allRecordsArray | filter={status:'Open'}">{{vm.name}}</span>, но это, похоже, не работало для меня. Даже если бы это произошло, я не знаю, как привязать его к выпадающему списку для изменения данных.

Я уверен, что кто-то сделал что-то похожее на это. Я просто не могу найти примеров.

UPDATE

В отладчике, я могу видеть записи вернулись из вызова базы данных (428 записей). Я также могу увидеть свойство с именем «StatusName», и на этом снимке экрана вы видите, что он говорит «Закрыто». Я фильтрую на Closed для тестирования, потому что большинство исходных записей находятся в состоянии «Закрыто».

Если я использую следующее без фильтрации, я получаю записи для заполнения на странице.

<tr ng-repeat="call in vm.calls"> 

Если я использую следующее, чтобы попытаться отфильтровать данные, на страницу ничего не будет выписано.

<tr ng-repeat="call in vm.calls | filter={StatusName: 'Closed'}"> 

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

Я не уверен, что это сейчас играет в проблему, но на всякий случай, вот мой код для выпадающего списка.

<select id="categoryId" 
     class="form-control" 
     ng-model="vm.selectedCategory" 
     ng-options="item.StatusName for item in vm.callStatus track by item.Id"> 
</select> 

Answer 1

Насколько я понимаю из вашего вопроса, вы должны использовать dropdownlist model in your filtering, а не использовать имя константы

От:

<span ng-repeat="vm in ctrl.allRecordsArray | filter={status:'Open'}"> 

To:

<span ng-repeat="vm in ctrl.allRecordsArray | filter={status: your_dropdownlist_model}"> 

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

Answer 2

Вы можете дать фильму свою собственную модель и позволить пользователю самостоятельно менять модель.

Here is a working plunker.

На ваш взгляд:

<button ng-click="currentStatus = ''">All</button> 
<button ng-click="currentStatus = 'Open'">Open</button> 
<button ng-click="currentStatus = 'Closed'">Closed</button> 

<ul> 
    <li ng-repeat="vm in items | filter: {status: currentStatus}">{{vm.name}}</li> 
</ul> 

И в контроллере:

$scope.currentStatus = 'Open'; 
    $scope.items = [ 
    {'status': 'Open', 
    'name': 'Open1'}, 
    {'status': 'Open', 
    'name': 'Open2'}, 
    {'status': 'Open', 
    'name': 'Open3'}, 
    {'status': 'Open', 
    'name': 'Open1'}, 
    {'status': 'Closed', 
    'name': 'Closed1'}, 
    {'status': 'Closed', 
    'name': 'Closed2'}, 
    ];