Question

我尝试使用带有ng-repeat的md-chips时使用（键，值）味道这是我尝试做的一个例子：

<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数据，例如{＆＃39; a＆＃39;：＆＃39; 1＆＃39;＆＃39;＆＃39;：＆＃39; 2＆＃39;＆＃39; c＆＃ 39;：＆＃39; 3＆＃39;}

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

使用此代码我可以{＆＃34; a＆＃34;：＆＃34; 1＆＃34;} {＆＃34; b＆＃34;：＆＃34; 2＆＃34;} {＆＃34; c＆＃34;：＆＃34; 3＆＃34;}，但它并不完全是我想要的。

Answer 1

试试这个

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

工作codepen

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

如何使用带有ng-repeat的md-chips（键，值）

2 个答案: