gpt4 book ai didi

javascript - AngularJS - limitTo 和过滤器

转载 作者:行者123 更新时间:2023-12-03 05:20:14 26 4
gpt4 key购买 nike

我正在尝试结合使用 Angular 的 limitTo 和过滤器,但它似乎无法正常工作。我希望能够在搜索框中输入一个值,然后按搜索。之后,我想通过在过滤器框中输入数字并按应用过滤器来限制显示的结果。但是,当我在那里输入数字时,它不会将结果限制为该数量,而是会清除所有结果。有什么建议么?例如,尝试搜索 simon。然后,在顶部框中输入 2 并单击“应用过滤器”,看看会发生什么。

笨蛋:

https://plnkr.co/edit/Y522GAdShVhseAKNWouK?p=preview

angular.module('userApp', []).controller('myCtrl', function($scope) {

var vm = this;

$scope.users = [
{'username':'david', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'michael', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'ben', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'simon', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'allen', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'crystal', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'meth', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'bryan', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'simon', 'email':'something@gmail.com', 'name':'Some Name'},
{'username':'simon', 'email':'something@gmail.com', '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>

最佳答案

您应该将它们翻转过来,因为它首先进行限制,然后再进行过滤。因此,将您的 html 更改为:

<tr ng-repeat="person in users | filter: searchKeyword | limitTo: limit">

关于javascript - AngularJS - limitTo 和过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41417176/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com