0
Я пытаюсь использовать угловое ограничениеTo и фильтровать вместе, но он не работает должным образом. Я хочу, чтобы иметь возможность ввести значение в поле поиска, а затем нажать поиск. Впоследствии я хочу ограничить результаты, отображаемые, введя число в поле фильтра и нажмите фильтр приложения. Однако, когда я ввожу число, вместо того, чтобы ограничивать результаты до этой суммы, он вместо этого удаляет все результаты. Какие-либо предложения? Например, попробуйте найти simon. Затем введите 2 в верхнем поле и нажмите «Применить фильтр» и узнайте, что произойдет.AngularJS - limitTo & filter
Plunker:
https://plnkr.co/edit/Y522GAdShVhseAKNWouK?p=preview
angular.module('userApp', []).controller('myCtrl', function($scope) {
var vm = this;
$scope.users = [
{'username':'david', 'email':'[email protected]', 'name':'Some Name'},
{'username':'michael', 'email':'[email protected]', 'name':'Some Name'},
{'username':'ben', 'email':'[email protected]', 'name':'Some Name'},
{'username':'simon', 'email':'[email protected]', 'name':'Some Name'},
{'username':'allen', 'email':'[email protected]', 'name':'Some Name'},
{'username':'crystal', 'email':'[email protected]', 'name':'Some Name'},
{'username':'meth', 'email':'[email protected]', 'name':'Some Name'},
{'username':'bryan', 'email':'[email protected]', 'name':'Some Name'},
{'username':'simon', 'email':'so[email protected]', 'name':'Some Name'},
{'username':'simon', 'email':'[email protected]', 'name':'Some Name'}
];
vm.showAll = function() {
$scope.limit = undefined;
};
vm.showMore = function(display) {
$scope.limit = display;
};
vm.search = function(searchBar) {
$scope.searchKeyword = searchBar;
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="userApp" ng-controller="myCtrl as main">
<h1>Hello Plunker!</h1>
<input type="text" ng-model="display">
<button type="button" ng-click="main.showMore(display);">Apply Filter</button>
<button type="button" ng-click="main.showAll();">Show All</button>
<br>
<br>
<input type="text" ng-model="searchBar" place="enter search keyword">
<button ng-click="main.search(searchBar);" type="button">Search</button>
<table>
<tr>
<th>Username</th>
<th>Email</th>
<th>Name</th>
</tr>
<tr ng-repeat="person in users | limitTo: limit | filter: searchKeyword">
<td>{{ person.username }}</td>
<td>{{ person.email }}</td>
<td>{{ person.name }}</td>
</tr>
</table>
</body>
</html>
отлично, спасибо! –