Ng-повторение ключей во вложенном объекте

Question

Я пытаюсь использовать ng-repeat для создания списка флажков для ключей во вложенном объекте.

Моего объект loosk как:

$scope.kids = [ 
      { 
       "name": "Will", 
       "age": 6, 
       "skills": { 
        "dancing": false, 
        "coloring": true 
       } 
      },{ 
       "name": "Sally", 
       "age": 7, 
       "skills": { 
        "dancing": false, 
        "coloring": true, 
        "runnning": true 
       } 
       } 
      ]; 

, и я хотел бы уникальный список ключей в «навыках» объект с каждым навыком в списке только один раз, а не один раз для каждого ребенка. (Т.е. «танцы», «окраска», «работает»)

This был полезным, но я до сих пор не могу получить уникальный список после попытки вложенных повторы

Вот моя текущая попытка JSFiddle

Спасибо!

Answer 1

Изменить Ваш HTML

Я думаю, что нужно изменить HTML, удалить ваш ng-repeats с этим

<span ng-repeat="kid in kids"> 
    <span ng-repeat="(key,skill) in kid.skills"> 
    <input type="checkbox" ng-modle="{{skill}}"> {{key}} 
    <br> 
    </span> 
</span> 

Это должно дать вам список ящиков, подключенных к правильному $scope и названий.

Вот ссылка на модифицированном jsfiddle

Edit

Я изменил код, чтобы отобразить список всех детей, а затем в этом списке есть список всех из дети индивидуальные навыки. В основном это касается понимания того, как работают петли.

Answer 2

Если у вас есть вопрос правильно, лучшим решением для вас будет создание фильтра, который извлекает ключи, сортирует их и извлекает уникальные значения. Затем вы можете использовать его за один повтор. Я разветвил ваш jsfiddle и added the filter.

Я решил использовать lodash для быстрого вытягивания значений, сглаживания, сортировки и удаления дубликатов. Lodash - огромная игровая площадка, и вы можете сделать фильтр еще более сокращенным.

Поскольку у вас есть повторный доступ к этому фильтру, я предлагаю вам использовать memoize, чтобы избежать избыточной оценки фильтра. Как только он вычисляется, он достаточно хорош. Основная memoization использует один ключ и не сможет учитывать другие параметры, но вы можете переопределить его и принять во внимание все параметры и получить точную и эффективную память.

Фильтр определяется следующим образом:

mymodule.filter('uniqueKeys', function(){ 
return function(input, keyPath){ 
    return _.unique(_.sortBy(_.flatten(_.map(input, 
     function(item){return _.keys(_.get(item, keyPath));})))); 
} 
}); 

и ретранслятор будет:

<div ng-repeat="skill in kids | uniqueKeys:'skills'"> 

Обратите внимание, что я прохожу в ключе, чтобы найти значение, если у вас поле хобби, что» d вы хотели бы извлечь, вам просто нужно написать:

<div ng-repeat="skill in kids | uniqueKeys:'hobbies'">