CODEWITHSUNDEEP
angularjsangular-material
Sudhir Shrestha
Sudhir Shrestha

Reputation: 1126

ng-repeat not working in md-chip

Why is md-chip not supporting ng-repeat?

<md-chips>
          <md-chip data-ng-repeat="category in book.categories">
            {{category.name}}
          </md-chip>
        </md-chips>

Upvotes: 5

Views: 2955

Answers (3)

Sudhir Shrestha
Sudhir Shrestha

Reputation: 1126

It seems I was looking for,

<md-chips ng-model="book.categories" readonly="true">
   <md-chip-template>
      <strong>{{$chip.name}}</strong>
   </md-chip-template>
</md-chips>

You bind it in ng-model to the md-chips tag instead of ng-repeat and then access the chip element by using $chip element inside the template tag.

Upvotes: 7

user3391137
user3391137

Reputation: 441

Use the md-chip-template instead of md-chip and use ng-model instead of ng-repeat.. like bellow.

<md-chips ng-model="user.skills" readonly="true">
    <md-chip-template>{{$chip.skill_title}}</md-chip-template>
</md-chips>

It should be work as your expectation.

Upvotes: 5

Remigius Stalder
Remigius Stalder

Reputation: 2170

with angular 1.3.15 / angular-material 0.9.8, the following works here:

in the controller:

$scope.myNumbers = [ 1, 2, 3 ];

in the HTML:

  <md-chips ng-model="myNumbers" readonly="true">
  </md-chips>

Upvotes: 3

Related Questions