2016-10-20 1 views
0

Я пытаюсь использовать md-фишки с ng-repeat при использовании (ключ, значение), вот пример того, что я пытаюсь делать:
Как использовать md-фишки с ng-repeat (ключ, значение)

<md-content class="md-padding" layout="column" ng-repeat="(key,value) in items"> 
    <md-chips ng-model="???" name="fruitName" readonly="true" md-removable="" md-max-chips="5"> 
     <md-chip-template> 
      <strong>{{key}} :{{value}}</strong> 
     </md-chip-template> 
    </md-chips> 
</md-content> 

(я не знаю, что делать в ng-model).
спасибо заранее
редактировать
здесь мои JSON данные, например { 'а': '1', 'B': '2', 'с': '3'}

<md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="true"> 
     <md-chip-template> 
      <span> 
      <strong> {{$chip}} </strong> 
     </span> 
     </md-chip-template> 
    </md-chips> 

с помощью этого кода я могу иметь { "A": "1"} { "Ъ": "2"} { "с": "3"}, но это не совсем то, что я хочу.

+0

опубликовать ваши данные в формате JSON – Sajeetharan

ответ

1

Попробуйте

<md-chips ... ng-model="_key" ng-init="_key = [key]" ...></md-chips>

Working codepen

+0

благодарю вас за ответ, ваш ответ работает на этот случай, но когда я его трюк в своем приложении, я получаю 'Duplicates в ретрансляторе, не разрешены. Используйте выражение «track by» для указания уникальных ключей. Повторитель: $ chip в $ mdChipsCtrl.items, Duplicate key: string: f, Duplicate value: f', и я не знаю почему, но я продолжаю искать. и спасибо еще раз :) – aName

+0

Я не знаю, почему, но в кодефене, который вы даете, если я изменю ключ от a, b и c, к действию, например, он не работает. – aName

+0

@hasanehas. Можете ли вы создать/update codepen/plnkr, чтобы воспроизвести проблему, с которой вы сталкиваетесь –

0

Вы можете создать другой объект, который будет хранить значение fruitName с тем же ключом.

$scope.fruitNames = {}; //inside controller. 

<md-content class="md-padding" layout="column" ng-repeat="(key,value) in items"> 
    <md-chips ng-model="fruitNames[key]" name="fruitName" readonly="true" md-removable="" md-max-chips="5"> 
     <md-chip-template> 
      <strong>{{key}} :{{value}}</strong> 
     </md-chip-template> 
    </md-chips> 
</md-content> 

Более удобным способом было бы, если вы можете изменить структуру JSon ниже. Тогда вы могли бы fruitName на каждом уровне записи

[ 
    {id: 'a', value: 1}, 
    {id: 'b', value: 2}, 
    {id: 'c', value: 3}, 
    ... 
] 

Markup

<md-content class="md-padding" layout="column" ng-repeat="item in items"> 
    <md-chips ng-model="item.fruitName" name="fruitName" readonly="true" md-removable="" md-max-chips="5"> 
     <md-chip-template> 
      <strong>{{item.id}} :{{item.value}}</strong> 
     </md-chip-template> 
    </md-chips> 
</md-content> 
+0

т hank you your response, но для первого варианта у меня было жесткое об этом, но я хочу иметь лучшее решение, основанное на моем объекте, для второго варианта мои данные не имеют такой формы. – aName

Смежные вопросы