Вкладки Angularjs только для уникальных элементов массива с использованием ng-repeat

Question

Я новичок в Angularjs, поэтому, пожалуйста, потерпите меня.У меня есть объект ответа, где есть информация о некоторых экзаменационных центрах.В объекте ответа центры из нескольких городов.Я хочу создать структуру bootstrap tab, используя Angularjs, где все общие названия городов будут отображаться как 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)