Material: md-chip components with ng-repeat directive not shown on Codepen

[nick-merrill]

md-chip components with ng-repeat directive are not shown.

Codepen Example based off of the Static Chips demo

In this case, the chips with the ng-repeat directive are not displayed at all:

<md-chips>
     <md-chip>Normal Static Chip</md-chip>

     <!-- Bug: Chips with ng-repeat directive do not display -->
     <md-chip ng-repeat="i in [1, 2, 3]">ng-repeat Chip</md-chip>
</md-chips>

[cleever]

Same here.

[tyler8691]

Seeing the same issue.

[sazonenka]

The similar issue exists when <md-chips> component is used inside ng-repeat:

<div ng-repeat="i in [1,2,3]">
  <md-chips>
    <md-chip>Normal Static Chip</md-chip>
  </md-chips>
</div>

Here only the last chip is displayed.

[pencilcheck]

I wonder about that too, I guess it's the directive priority not high enough? Maybe lowering the priority for md-chips or md-chip would help fix this?

[cnjsstong]

@sazonenka Same here.

ng-repeat on md-chip unavailable is not a big deal. But md-chips inside ng-repeat not working makes md-chips totally unusable.

[cnjsstong]

Actually we have two different issues here. I have opened a new one. Those having issues about md-chips inside of ng-repeat please go to #3482 .

@sazonenka

[kvetis]

@cnjsstong2 Not totaly unusable.
If you want a readonly chip list just set the readonly attribute to "true" on md-chips. Example with custom template:

<md-chips ng-model="ctrl.items" readonly="true">
    <md-chip-template>
        {{$chip.name}}
    </md-chip-template>
</md-chips>     

The md-chips uses ng-repeat internally so $chip is the item from the list you have provided in the ng-model.

[theblang]

@kvetis Thanks for the workaround!

[pencilcheck]

+1 That works.

[topherfangio]

Since we have a workaround for the md-chip repeat issue, and 0.11 will close the md-chips repeat issue, can we go ahead and close this, or should we look at taking the time to support this use-case?

A cursory look seems like it might take quite a bit of refactoring to get this implemented.

@ThomasBurleson @robertmesserle Thoughs?

[du6]

I still hope that md-chip can work with ng-repeat because it is difficult to set focus with the workaround method.

[topherfangio]

@du6 Can you elaborate on the focus issue? I'm not quite sure I understand what you mean.

[du6]

@topherfangio Problem solved. Please ignore that comment. Sorry for any inconvenience.

[topherfangio]

Okay, since we have a workaround, and we haven't gotten any additional feedback, I'm going to go ahead and close this. If someone in the future would like us to reconsider, please post a comment we'll take a look.

[LeartS]

with readonly="true" it leaves some space on the chip for the close icon, while with really static chips it doesn't.

[AlexVKO]

@LeartS same here

[srukali]

This is still a problem for me because I am using the chips as a kind of tag editor for images. I can't have static chips because the user can add whatever tags they want.

[topherfangio]

@srukali Can you not use the ng-model attribute? A Codepen would be very helpful in understanding what you are trying to achieve :-)

[srukali]

@topherfangio This is a general idea of what I'm trying to do
http://codepen.io/anon/pen/XdOxxV

For now I'm turning the editor into a component and then repeat from there.

[topherfangio]

@srukali Perhaps you can describe it a bit more, but this should actually work. We fixed the bugs that were causing problems with an ng-repeat outside of the chips. This issue was about something like the following:

<md-chips>
  <md-chip ng-repeat="..."></md-chip>
</md-chips>

In your Codepen, it looks like your ctrl.tags variable is an empty array, but the ng-model on the chips, points to ctrl.tags[$index] which will be null/undefined.

Here is an updated one that I think will work as you expect: http://codepen.io/topherfangio/pen/LNqXWK

[srukali]

@topherfangio I saw comments related to the ng-repeat outside in this thread and I thought it might be related.
But thank you, that works as expected. I feel silly, I've been staring at this too long clearly.

[topherfangio]

@srukali Glad I could help!

[TheNoobCH]

I have to use the md-chip with data from two different lists.

<md-chips>
  <md-chip ng-repeat="data in firstList"></md-chip>
  <md-chip ng-repeat="data in secondList"></md-chip>
</md-chips>

does anyone have an idea how i could get this working?

[topherfangio]

@TheNoobCH The easiest way to do this is probably to setup a separate list based off of the first two which just concatenates them together and use the ng-model feature of the chips.

[TheNoobCH]

@topherfangio Thank you for the quick reply.
That's exactly what I've done. I'm having some other problems now, but they don't belong to this issue.

[TheNoobCH]

The use of ng-repeat on the md-chip could be very useful if you want to style the chips.
For example if I want the chips from the first list red and the chips from the second list blue.

<md-chips>
  <md-chip class="red" ng-repeat="data in firstList"></md-chip>
  <md-chip class="blue" ng-repeat="data in secondList"></md-chip>
</md-chips>

I haven't found a way to do this with the current given posibilities yet.

[topherfangio]

@TheNoobCH Yes, unfortunately there are currently some technical reasons why this isn't available at the moment. As far as what you want to do, you could use ng-class and have it based off of an attribute in the data.

[cmacdonnacha]

Any update on this?

[topherfangio]

@cmacdonnacha This issue was closed a while ago because there are usually ways to work around it, and solving it would be very complex.

What are you trying to do? Perhaps I can point you to a workaround?

[cmacdonnacha]

@topherfangio Thanks for your reply. I'm trying to display a list of read-only chips using a property on an object as the text.

Here's a codepen: http://codepen.io/cmacdonnacha/pen/pbPwvp?editors=1010

Any help would be greatly appreciated, thanks!

[topherfangio]

@cmacdonnacha Gotch, then you want to use <md-chips ng-model="..."> and the <md-chip-template>.

Here is an example of how to get this to work: http://codepen.io/topherfangio/pen/qNmjVW?editors=1010

[cmacdonnacha]

@topherfangio thanks for that! The only thing is that they need to be read only.

[topherfangio]

@cmacdonnacha Good thing chips support the readonly attribute then 😄

I've updated my Codepen above to include it so you can see how it works. Hope this helps!

[cmacdonnacha]

@topherfangio Perfect thanks a million! :-)

[sea-erkin]

@kvetis Thank you

[RakeshMaddala]

@topherfangio Workaround provided works, but nothing updated on the docs about the static chips and ng-repeat issue

[topherfangio]

@RakeshMaddala Care to submit a PR for the docs addition? If so, I'll definitely review it ASAP!

[EhsanKia]

I got the impression reading the thread above that ng-repeat on md-chip was fixed, but it doesn't seem to work for me. Am I understanding it wrong?
https://codepen.io/EhsanKia/pen/BJdPKG

I want to manually use chips, what would be the best way to go?

EDIT: It seems like using <div class="md-chips"> instead of <md-chips> comes the closest to a solution. Although I have to manually add the background-color, as for some reason, that one is done using md-chips instead of .md-chips in the css.

[hseleiro]

@kvetis Thank You !!