populating from json with Angular1 (Using Angular Material)

Question

I am able to do something similar everywhere else, but not with checkboxes. What am I missing here?

My json looks like this:

{
"data": [
     {
        "id": 1,
        "tags": [
            "tag1",
            "tag2"
        ],
        ...a bunch of other stuff...
    },
    {
        "id": 2,
        "tags": [
            "tag1",
            "tag2",
            "tag3",
            "tag4"
        ],
        ...a bunch of other stuff...
    }
 ]
 }

And my HTML (Angular) looks like this:

<div ng-repeat="tag in ::vm.media.tags track by $index">
     <md-checkbox >
         {{tag.tags}}
     </md-checkbox>
</div>

I am having a hard time getting the actual text or name of the tags to show next to the checkbox. ALl I am getting is the checkboxes alone as the image shows below

Thanks in advance

Not quite. Each tag is its own checkbook. That's why the ng repeat is different in my code than yours — LOTUSMS
– LOTUSMS, Commented Feb 16, 2017 at 19:38
Correct :). There are several items and each has different tags and amount of tags. The ng repeat should display all tags for that particular item with a checbox — LOTUSMS
– LOTUSMS, Commented Feb 16, 2017 at 19:42

nextt1 · Accepted Answer · 2017-02-17 05:53:35Z

1

You just need to use one more ng-repeat to iterate all the tags for each data item. Here is the code.

<div ng-repeat="data in data.data" layout="column">
 <span> ID: {{data.id}}</span>
 <md-checkbox ng-repeat="eachTag in data.tags">
  {{eachTag}}
 </md-checkbox>
</div>

Here is the working Codepen.

answered Feb 17, 2017 at 5:53

nextt1

4,0082 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

populating from json with Angular1 (Using Angular Material)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related