Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-chip components with ng-repeat directive not shown on Codepen #2829

Closed
nick-merrill opened this issue May 12, 2015 · 39 comments
Closed

md-chip components with ng-repeat directive not shown on Codepen #2829

nick-merrill opened this issue May 12, 2015 · 39 comments
Labels
- Lots of Comments needs: team discussion This issue requires a decision from the team before moving forward. resolution: works as expected The functionality works as designed and documented.
Milestone

Comments

@nick-merrill
Copy link

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>
@nick-merrill nick-merrill changed the title md-chip components with ng-repeat directive are not shown. md-chip components with ng-repeat directive not shown May 12, 2015
@nick-merrill nick-merrill changed the title md-chip components with ng-repeat directive not shown md-chip components with ng-repeat directive not shown May 12, 2015
@marcysutton marcysutton changed the title md-chip components with ng-repeat directive not shown md-chip components with ng-repeat directive not shown on Codepen May 12, 2015
@cleever
Copy link

cleever commented May 12, 2015

Same here.

@tyler8691
Copy link

Seeing the same issue.

@sazonenka
Copy link

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

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

@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
Copy link

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

kvetis commented Jul 1, 2015

@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
Copy link

@kvetis Thanks for the workaround!

@pencilcheck
Copy link

+1 That works.

@jelbourn jelbourn modified the milestones: 1.0-beta1, 0.11.0 Aug 14, 2015
@naomiblack naomiblack modified the milestones: 1.0-beta1, 0.12.0 Aug 14, 2015
@topherfangio
Copy link
Contributor

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?

@topherfangio topherfangio added the needs: team discussion This issue requires a decision from the team before moving forward. label Aug 21, 2015
topherfangio added a commit that referenced this issue Dec 2, 2015
In readonly mode, the dynamic chips had an additional bit of padding
that made them inconsistent with static chips and caused the inner
text to not be centered.

Fixes #2829 (already closed, but people mentioned it in comments)
@srukali
Copy link

srukali commented May 9, 2016

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
Copy link
Contributor

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

@srukali
Copy link

srukali commented May 9, 2016

@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
Copy link
Contributor

@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
Copy link

srukali commented May 9, 2016

@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
Copy link
Contributor

@srukali Glad I could help!

@TheNoobCH
Copy link

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
Copy link
Contributor

@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
Copy link

@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
Copy link

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
Copy link
Contributor

@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
Copy link

Any update on this?

@topherfangio
Copy link
Contributor

@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
Copy link

@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
Copy link
Contributor

@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
Copy link

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

@topherfangio
Copy link
Contributor

@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
Copy link

@topherfangio Perfect thanks a million! :-)

@sea-erkin
Copy link

@kvetis Thank you

@RakeshMaddala
Copy link

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

@topherfangio
Copy link
Contributor

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

@EhsanKia
Copy link

EhsanKia commented Jan 4, 2018

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

@kvetis Thank You !!

@Splaktar Splaktar added - Lots of Comments resolution: works as expected The functionality works as designed and documented. labels Mar 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
- Lots of Comments needs: team discussion This issue requires a decision from the team before moving forward. resolution: works as expected The functionality works as designed and documented.
Projects
None yet
Development

No branches or pull requests