как переместить json объект в угловой js?

Question

У меня есть объект json, и мне нужно повторить этот объект в угловом. Я расскажу вам свою проблему. У меня есть одна кнопка. При нажатии этой кнопки пользователь может выбрать несколько элементов. Я беру пример ('a', 'b', 'c' ... и так далее). Когда пользователь выбирает 'a' и закрываю всплывающее окно Мне достаточно показать этот результат.

Ожидаемый результатwhen 'a' is selected

A // header 
A S //names 
A p 

Когда пользователь выбирает 'A' проводить поиск showTableData и показать имена ниже заголовка:

"A": [ 
    { "name":"A S"}, 
    { "name":"A p"} 
    ], 

Когда пользователь выбирает 'A' и ' B ', то ожидаемый результат:

A      B // headers 

A S      B BS 
A P      B Bp 

так далее.

Фактически я могу печатать заголовок, если пользователь выбирает любую вещь «A» .'B ',' C '.. так далее. Я не знаю, как напечатать соответствующие имена ниже заголовка.

Вот мой код: http://codepen.io/anon/pen/zGNLdR

 <div class="row"> 
     <div ng-repeat="d in data"> 
    <div class="col" ng-show="d.checked">{{d.name}}</div> 
     </div> 
</div> 

есть ли другой способ, чтобы JSon объект, чтобы показать ожидаемый результат .. можно отобразить другой способ данные с showTabledata так, что я буду получить ожидаемый результат?

$scope.showTableData={ 
     "A": [ 
     { "name":"A S"}, 
     { "name":"A p"} 
     ], 
     "B": [ 
     { "name":"B BS"}, 
     { "name":"B Bp"} 
     ], 
     "c": [ 
     { "name":"c c"}, 
     { "name":"c c"} 
     ], 
     "d": [ 
     { "name":"d dS"}, 
     { "name":"d dp"} 
     ], 
     "E":[ 
     { "name":"E ES"}, 
     { "name":"E Ep"} 
     ] 
    }; 

Answer 1

Я думаю, что самое простое решение просто добавить еще один DIV и перебирать в нем над showTableData переменной, но только с помощью ключей, которые были выбраны.

<div ng-repeat="d in data"> 
    <div class="col" ng-show="d.checked">{{d.name}}</div> 
    <div class="col" ng-show="d.checked" 
     ng-repeat="nameObject in showTableData[d.name]"> 

      {{nameObject.name}} 

    </div> 
</div> 

Example on codepen.

Есть некоторые вещи, которые можно реорганизовать, но я надеюсь, что вы получите эту идею.

---

Существует немного более чистое решение с использованием фильтра. С помощью этого подхода вы можете удалить ng-show внутри ng-repeat.

<div ng-repeat="d in data | filter:{checked: true}"> 
    <div class="col">{{d.name}}</div> 
    <div class="col" ng-repeat="nameObject in showTableData[d.name]"> 

     {{nameObject.name}} 

    </div> 
</div> 

Example.