gpt4 book ai didi

javascript - Angular js过滤器用于搜索功能

转载 作者:行者123 更新时间:2023-11-29 19:08:44 25 4
gpt4 key购买 nike

如何使用此AngularJS结构将json过滤器用于搜索功能?

$scope.jsonObj = {
idNo1: {
name: "Diljish",
age: 24
},
idNo2: {
name: "Shemeem",
age: 28
}
}

最佳答案

不需要JavaScript代码。

您应该创建input以便过滤数据:

Filter: <input type="text" ng-model="yourFilter.name"/>


 



然后,在 ng-repeat中:

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in persons | filter:yourFilter | orderBy:'name'">
<td>{{ person.name | uppercase}}</td>
<td>{{ person.age | lowercase}}</td>
</tr>
</table>


其中 persons是您的 json对象。

(function()
{
var yourController=function($scope) {
$scope.persons= [];

function init() {
$scope.persons={
idNo1: {
name: "Diljish",
age: 24
},
idNo2: {
name: "Shemeem",
age: 28
}}
}
init();
};


yourController.$inject=['$scope'];

angular.module('yourApp').controller('yourController',
yourController);

}());


更新:

如果使用另一个 json对象,则保持不变:

<body ng-init="people=[{ name:'Shemmem' }, { name:'Diljish' }]">
Filter: <input type="text" ng-model="yourFilter.name"/>
<table>
<tr>
<td>Name</td>
<td>City</td>
</tr>
<tr ng-repeat="person in people | filter:yourFilter">
<td>{{ person.name }}</td>
<td>{{ person.city }}</td>
</tr>
</table>
</body>

关于javascript - Angular js过滤器用于搜索功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40804871/

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