Javascript AngularJS基于JSON记录过滤数据
我有一个JSON文件,想根据餐厅地址打印Javascript AngularJS基于JSON记录过滤数据,javascript,angularjs,arrays,sorting,angularjs-scope,Javascript,Angularjs,Arrays,Sorting,Angularjs Scope,我有一个JSON文件,想根据餐厅地址打印,但我想根据“r.address”字段对它们进行分组。像所有带有“地址”的记录一样,德里应该先显示,然后是所有“昌迪加尔”的记录,以此类推。我该怎么做 下面是我的一些代码 <a href="#" ng-repeat="r in resturant" id="rest-list-f" class="offVal"> <div class="col-md-
,但我想根据“r.address”字段对它们进行分组。像所有带有“地址”的记录一样,德里应该先显示,然后是所有“昌迪加尔”的记录,以此类推。我该怎么做
下面是我的一些代码
<a href="#" ng-repeat="r in resturant" id="rest-list-f" class="offVal">
<div class="col-md-6 col-centered form-planner-inner">
<span class="form-text">{{ r.Name }}</span><br>
<address><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> {{ r.Address }}</address>
<img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"><br>
<hr/>
<table class="eventActive">
<caption><strong><center><a href="#">Click To Read Reviews</a></center></strong></caption>
<tr>
<td><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> {{ r.Type }}</td>
<td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> {{ r.Hours }}</td>
</tr>
</table>
</div>
</a>
这是我想要的输出,如:
<div> Restaurant Name, Address: Delhi </div>
<div> Restaurant Name, Address: Mohali </div>
<div> Restaurant Name, Address: Mohali </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Chandigarh </div>
餐厅名称、地址:德里
餐厅名称、地址:Mohali
餐厅名称、地址:Mohali
餐厅名称、地址:Rajpura
餐厅名称、地址:Rajpura
餐厅名称、地址:Rajpura
餐厅名称、地址:昌迪加尔
您可以使用angular.filter
模块的groupBy过滤器。
所以你可以这样做:
用法:collection | groupBy:property
使用带点符号的嵌套属性:property.nested\u属性
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
HTML:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
组名:{{key}
-
玩家:{{player.name}
结果:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
组名:阿尔法
- 球员:吉恩
- 球员:乔治
- 球员:保拉
- 球员:史蒂夫
- 玩家:Scruath
angular.filter
模块的groupBy过滤器。
所以你可以这样做:
用法:collection | groupBy:property
使用带点符号的嵌套属性:property.nested\u属性
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
HTML:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
组名:{{key}
-
玩家:{{player.name}
结果:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
组名:阿尔法
- 球员:吉恩
- 球员:乔治
- 球员:保拉
- 球员:史蒂夫
- 玩家:Scruath
- 我对您的代码做了一些更改。请试试这个
JSON
$scope.Restaurents = {
"records": [
{
"Name": "Sagar Ratna",
"Image": "./images/sr.jpg",
"Address": "Mohali",
"Type": "South Indian",
"Hours" : "10:00-23:30"
},
{
"Name": "The Night Factory",
"Image": "./images/nf.jpg",
"Address": "Chandigarh",
"Type": "Chinese",
"Hours" : "24/7"
},
{
"Name": "Whistling Duck",
"Image": "./images/ed.jpg",
"Address": "Rajpura",
"Type": "Chinese",
"Hours" : "11:30-23:30"
},
{
"Name": "Uncle Jack's",
"Image": "./images/uj.jpg",
"Address": "Mohali",
"Type": "Pizza",
"Hours" : "10:00-22:30"
},
{
"Name": "Corner Griller",
"Image": "./images/cg.jpg",
"Address": "Rajpura",
"Type": "North Indian",
"Hours" : "11:00-23:30"
}, {
"Name": "Starbucks",
"Image": "./images/st.jpg",
"Address": "Delhi",
"Type": "Coffee",
"Hours" : "24/7"
}
]
}
Html
<a href="#" ng-repeat="r in Restaurents.records | orderBy:'Address'" id="rest-list-f" class="offVal">
<div class="col-md-6 col-centered form-planner-inner">
<span class="form-text">{{ r.Name }}</span><br>
<address><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> {{ r.Address }}</address>
<img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"><br>
<hr />
<table class="eventActive">
<caption><strong><center><a href="#">Click To Read Reviews</a></center></strong></caption>
<tr>
<td><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> {{ r.Type }}</td>
<td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> {{ r.Hours }}</td>
</tr>
</table>
</div>
</a>
{{r.Type}
{{r.小时数}
希望这会有帮助。
您还可以在控制器端处理时对json数组进行分组。我在您的代码中做了一些更改。请试试这个 JSON
$scope.Restaurents = {
"records": [
{
"Name": "Sagar Ratna",
"Image": "./images/sr.jpg",
"Address": "Mohali",
"Type": "South Indian",
"Hours" : "10:00-23:30"
},
{
"Name": "The Night Factory",
"Image": "./images/nf.jpg",
"Address": "Chandigarh",
"Type": "Chinese",
"Hours" : "24/7"
},
{
"Name": "Whistling Duck",
"Image": "./images/ed.jpg",
"Address": "Rajpura",
"Type": "Chinese",
"Hours" : "11:30-23:30"
},
{
"Name": "Uncle Jack's",
"Image": "./images/uj.jpg",
"Address": "Mohali",
"Type": "Pizza",
"Hours" : "10:00-22:30"
},
{
"Name": "Corner Griller",
"Image": "./images/cg.jpg",
"Address": "Rajpura",
"Type": "North Indian",
"Hours" : "11:00-23:30"
}, {
"Name": "Starbucks",
"Image": "./images/st.jpg",
"Address": "Delhi",
"Type": "Coffee",
"Hours" : "24/7"
}
]
}
Html
<a href="#" ng-repeat="r in Restaurents.records | orderBy:'Address'" id="rest-list-f" class="offVal">
<div class="col-md-6 col-centered form-planner-inner">
<span class="form-text">{{ r.Name }}</span><br>
<address><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> {{ r.Address }}</address>
<img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"><br>
<hr />
<table class="eventActive">
<caption><strong><center><a href="#">Click To Read Reviews</a></center></strong></caption>
<tr>
<td><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> {{ r.Type }}</td>
<td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> {{ r.Hours }}</td>
</tr>
</table>
</div>
</a>
{{r.Type}
{{r.小时数}
希望这会有帮助。
您还可以在控制器端处理时对json数组进行分组