как использовать md-чипы с ng-repeat (ключ, значение)

#angularjs #angular-material #md-chip

#angularjs #angular-материал #md-чип

Вопрос:

Я пытаюсь использовать 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-данные, например {‘a’: ‘1’,’b’: ‘2’, ‘c’: ‘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»} {«b»: «2»} {«c»: «3»}, но это не совсем то, что я хочу.

Ответ №1:

Попробуйте это

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

Работает codepen

1. спасибо за ответ, ваш ответ подходит для этого случая, но когда я пытаюсь использовать его в своем приложении, я получаю Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $chip in $mdChipsCtrl.items, Duplicate key: string:f, Duplicate value: f и я не знаю почему, но я продолжаю искать. и спасибо вам в другой раз 🙂

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

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

4. Я думаю, что я неправильно использую md-чипы, они используются без ng-repeat — это в правке, которую я сделал

5. все в порядке, я сделал ng-repeat в md-чипах вместо md-содержимого, и это работает как шарм

Ответ №2:

Вы могли бы создать другой объект, который будет хранить значение 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},
  ...
]

Разметка

 <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>

1. спасибо за ваш ответ, но для первого варианта мне пришлось нелегко, но я хотел бы иметь лучшее решение, основанное на моем объекте, для второго варианта мои данные не имеют такой формы.