JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="checkboxApp" ng-controller="TestCtrl">
<checkboxes data='checkboxes1'></checkboxes>
<p>Name: {{checkboxes1.Name[0].check}}<p>
<p>Service good: {{checkboxes1.Service[0].check}}<p>
<p>Service bad: {{checkboxes1.Service[1].check}}<p>
</div>
JavaScript
angular.module('checkboxApp', [])
.factory('checkBoxFactory', function(){
var checkboxes = function(jsonObject){
for(var category in jsonObject) {
for (var i=0;i<jsonObject[category].length;i++){
jsonObject[category][i].check=true;
}
}
return jsonObject;
}
return {
create: function(jsonObj){return new checkboxes(jsonObj);}
}
})
.directive('checkboxes', function(){
return {
restrict: 'E',
scope: {
data: '=data'
},
template: '<div><div ng-repeat="(category, tags) in data"><h3>{{category}}</h3><span ng-repeat="tag in tags"><input type="checkbox" ng-model="tag.check"> {{ tag.name }} <br/></span></div> </div>',
controller: function($scope){
}
}
})
function TestCtrl($scope, checkBoxFactory) {
var jsonObject={
"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"
}
]
};
$scope.checkboxes1=checkBoxFactory.create(jsonObject);
}