Как отфильтровать массив по имени в AngularJS

0

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

У меня такой контроллер:

var app = angular.module('app', []);
app.controller('Ctrl',[], function($scope){
$scope.LoggedInTeacher = 'Papa Johns';
$scope.Teachers = [{Id: 1, Name: 'Patricia Johns' , Subject: 'Science'},
                   {Id: 2, Name: 'Veronica Smith' , Subject: 'Maths'},
                   {Id: 3, Name: 'Clifford Harris' , Subject: 'Music'},
                   {Id: 4, Name: 'Papa Johns' , Subject: 'Catering'},
                   {Id: 5, Name: 'Bill Gates' , Subject: 'Information Tech'},
                   {Id: 6, Name: 'Papa Johns' , Subject: 'Dance'}
]


})

;

//Here is my View - filtering my array


<div ng-controller = "Ctrl">

<table>

<tr>
<th> Name </th>
<th> Subject</th>

</tr>

<tr ng-repeat=" t in Teachers">

<td>{{t.Name}}</td>
<td>{{t.Subject}}</td>
</tr>

</div>

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

<input type="checkbox" ng=model="filter table by LoggedInTeacher "> Show only Mine
<input type="checkbox" ng-model="show all"> Show All

Как я буду добиваться этого?

спасибо

Теги:

3 ответа

2
Лучший ответ

Сохраните фильтр, введенный пользователем, например, filterValue. В каждом из вариантов измените значение filterValue, когда пользователь выбирает флажок.

<input type="checkbox" ng-click="filterValue = LoggedInTeacher"> Show only Mine </input>
<input type="checkbox" ng-click="filterValue = ''"> Show All </input>

В ng-repeat измените ваше выражение:

<tr ng-repeat="t in Teachers | filter: filterValue">
  • 0
    Огромное спасибо!
0

Вы можете использовать это.

<tr ng-repeat=" t in Teachers | filter: {name: LoggedInTeacher}">
0

Вы можете использовать фильтр следующим образом:

<tr ng-repeat=" t in Teachers | filter: {name: 'Bill Gates'}">

Вместо {name: 'Bill Gates'} вы можете поместить переменную, определяющую фильтр.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню