Need to dynamically build checkboxes in angular from JSON object loaded from ajax

Question

I have a JSON doc in the following format and need to use that to dynamically build check boxes using angular.

var data = {
"Name":[
    {
        "tagId":4489,"name":"Name","label":"Employee Name"
    }
],
"Service":[
    {
        "tagId":1722,"name":"good service","label":"Good Service"
    },
    {
        "tagId":3707,"name":"bad service","label":"Bad Service"
    }
]};

I am just learning Angular js and the project I am working on will need the check boxes in the following format.

Name

[ ] Employee Name

Service

[ ] Good Service

[ ] Bad Service

The JSON is loaded on startup with ajax in my main controller. I am not quite sure how let Angular build this for me using the ng-repeat function.

Any help is appreciated.

NicolasMoise · Accepted Answer · 2013-10-22 19:41:36Z

2

Check out my fiddle. I belive my answer is a bit more complete than Khalil's.

http://jsfiddle.net/nicolasmoise/8YQPh/1

I have created a factory .factory('checkBoxFactory', function(){}) which takes the JSON object and adds a check="false" to every tag. This may not be necessary, but I believe it's better to set the values right away in case the user doesn't touch them.

Finally, I have directive .directive('checkboxes', function(){}) which takes the checkboxes I have created through the factory and creates the desired markup. With this you can change the name of your categories (Name, Service) and it still works.

Let me know if this is not what you had in mind or if you have questions.

edited Oct 22, 2013 at 19:41

answered Oct 22, 2013 at 19:32

NicolasMoise

7,27910 gold badges47 silver badges65 bronze badges

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

Comments

KhalilRavanna · Accepted Answer · 2013-10-22 17:06:52Z

1

I made a jsfiddle of the most basic example of what you're looking for over here.

Basically I just attached data to the scope and iterated over both lists, "Service" and "Name" and used inputs with type=checkbox(angular docs) and attached an ng-model linked to a check value on each object (this will be added by angular when you activate the checkbox).

You can monitor the values of the checkboxes by referencing check on each object. I do this by doing ng-repeat="service in data.Service" and then calling service.check.

edited Oct 22, 2013 at 17:06

answered Oct 22, 2013 at 16:59

KhalilRavanna

6,1383 gold badges30 silver badges25 bronze badges

2 Comments

Crobzilla Over a year ago

Thanks, this is very helpful. The only thing is that I don't want to refer to data.Name or data.Service directly because those are dynamic values and might be something else. Does this make sense? I also wont know how many of those top level elements there are.

KhalilRavanna Over a year ago

You can solve that by nesting ng-repeats. You just use a div or span to iterate through the top level elements and then just throw the lower level ng-repeat beneath that. Here, I updated my example to show this. jsfiddle.net/U3pVM/1686

Collectives™ on Stack Overflow

Need to dynamically build checkboxes in angular from JSON object loaded from ajax

Name

Service

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Name

Service

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related