Как фильтровать данные на основе значения выпадающего меню?

Question

Примечание: AngularJS версия 1.2.28

Я новичок в AngularJS и пытается скрыть элементы на основе значения, выбранного в раскрывающемся меню. Если выбрана опция «Черный», в таблице данных должны отображаться только элементы с цветом разделения «Черный». Если выбрана опция «Желтый», в таблице данных должны отображаться только элементы с цветом разделения «Желтый».

Как я могу фильтровать данные и скрывать элементы, которые не содержат значения, выбранного в раскрывающемся меню?

Вот мои данные примеров (я ушел из директивы приложения и контроллера для краткости):

[{ lastName: 'Doe', firstName: 'John', division: 'Blue'}, 
{ lastName: 'Smith', firstName: 'Jane', division: 'Yellow' }] 

выпадающей HTML:

<select ng-model="orderProp"> 
    <option value="division">Black</option> 
    <option value="division">Yellow</option> 
</select> 

Таблица Вид:

<table> 
    <thead> 
    ...snip ... 
    </thead> 
</table> 
<tbody> 
    <tr ng-repeat="item in items | orderBy: orderProp"> 
     <td></td> 
    </tr> 
</tbody> 

Мой скрипт:

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope, $http){ 
    $http.get('data.json').success(function(data){ 
     $scope.items = data; 
     $scope.orderProp = 'lastName'; 
    }); 
}); 

Answer 1

Ответ прост, вы должны добавить фильтр по умолчанию, как вы добавили OrderBy (который также является своего рода фильтром):

<table> 
    <thead> 
    ...snip ... 
    </thead> 
</table> 
<tbody> 
    <tr ng-repeat="item in items | filter: orderProp | orderBy: orderProp"> 
     <td></td> 
    </tr> 
</tbody> 

HERE вы можете узнать больше о функции фильтра.

Answer 2

Попробуйте это,

<tr ng-repeat="item in items | filter: {division: orderProp}"> 
    <td></td> 
</tr> 

и почему вам нужно $scope.orderProp = 'lastName'; в контроллере? Удалите его, если он действительно не нужен