Question

我是Angularjs的新手，所以请多多包涵。我有一个响应对象，其中有一些考试中心的信息。在响应对象中，中心来自多个城市。我想使用Angularjs创建一个bootstrap tab结构，其中所有常见的城市名称将显示为tab header，每个城市下的所有中心都将显示为tab content。

我无法弄清楚我应该如何在Angularjs中显示以普通城市名称作为标签标题，而不是通过使用带有某些过滤器的简单ng-repeat来全部显示。

示例响应：

    [{
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67888875ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     },
     {
       "_id": "xx6733335ggg",
       "name": "Center Name",
       "city": "Kolkata",
       "location": "xyz, Kolkata",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     }]

因此，这里的标签将仅显示德里，孟买，加尔各答的标签，而不是孟买和德里的两个标签。

Answer 1

将值修改为嵌套级别（首先是城市，然后是州）。现在，您可以对它们进行ng-repeat。

我写了一个示例html如何使用它。

<div>
 <div ng-repeat="(key,val) in res" ng-click="show=!show">
    <div>{{key}}</div>
    <div ng-show="show" ng-repeat="center in res[val]">{{center.name}}</div>
 </div>
</div>

var arr  = [{
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67888875ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     },
     {
       "_id": "xx6733335ggg",
       "name": "Center Name",
       "city": "Kolkata",
       "location": "xyz, Kolkata",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     }]

var res= {}

arr.forEach((a) => {
  if(typeof res[a.city] === 'undefined') {
	res[a.city] = [a]
  } else {
    res[a.city].push(a)
  }
})
console.log(res)

AngularJS选项卡仅适用于使用ng-repeat的唯一数组元素

1 个答案: