ui-bootstrap pagination с фильтром

Question

после некоторого исследования и изучения примеров я реализовал ошибку с функцией фильтрации.

Im очень новый для углового, поэтому мне нужна ваша помощь, если это приложение в порядке или оно содержит некоторые ошибки/логические ошибки.

Целью является выбор коллекции (в этом приложении load1 или load2) и создание новых объектов, управление существующими или удаление некоторых из них. При каждом обновлении данных он должен быть проверен, если разбиение на страницы синхронно размеру коллекции. Если пользователь вводит что-то в поле поиска, наблюдатель в контроллере обжигают для обновления отфильтрованного данные:

$scope.$watch('search.name', function (newVal, oldVal) { 
    $scope.filtered = filterFilter($scope.items, {name: newVal}); 
}, true); 

Я был бы очень рад, если некоторые из вас угловые специалисты могут изучить этот код и дать мне некоторые отзывы. Я хочу использовать это в продуктивной системе, поэтому каждый ответ будет замечательным!

Вот рабочий plunkr: http://plnkr.co/edit/j9DVahEm7y1j5MfsRk1F?p=preview

Спасибо!

Answer 1

Наблюдатели тяжелые, если вы используете их явно во всем своем большом приложении. Используйте вместо этого ng-change. Кроме того, пропуская true, этот наблюдатель означает, что вы глубоко смотрите, что действительно плохо, потому что он проверяет каждое свойство объекта в массиве с интенсивностью работы.

Поскольку я не вижу, что вам нужно старое и новое значение по какой-либо причине, вы можете просто использовать . Всякий раз, когда вы вводите что-то, $scope.search.name имеет обновленное значение. Просто нужно вызвать функцию на ng-change.

DEMO: http://plnkr.co/edit/TWjEoM3oPdfrHfcru7LH?p=preview

Снимите часы и использование:

$scope.updateSearch = function() { 
    $scope.filtered = filterFilter($scope.items, {name: $scope.search.name}); 
}; 

В HTML:

<label>Search:</label> <input type="text" ng-model="search.name" placeholder="Search" ng-change="updateSearch()" /> 

Answer 2

Предыдущий ответ по-прежнему является правильным, но вам придется убедиться, что замените «страницу» внутри тега разбиения на страницы и измените его на ng-модель.

Из журнала изменений (https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md)

С 0.11.0:

Оба нумерацией страниц и пейджера теперь интегрированы с ngModelController.

• страница заменена на ng-model.