I'm currently working on angularjs project and since I'm a fresher, I have doubt on ng-model directive ... I need to know how to dynamically bind value from nested json to ng-model in the html page ... In below code, I want to bind resumeField value(which is also a json object =>(resume.firstName)) in ng-model. To be simple, the value of firstName in resume json should be assigned as value of resumeField and it should be binded to ng-model in html page. And it should also be editable. That's it. If anyone knows, pls reply with your answers... Thanks in advance ...
This is my html code
<section ng-repeat="sec in section">
<div class="edit-container">
<div class="conatainer nopadding">
<div ng-repeat="subSec in sec.subSection">
<div class="templist">
<h2 style="width: 100px; color: {{subSec.color}};">{{subSec.label}}</h2>
<!-- <h1 style="color:#fff;">james</h1> -->
<div ng-repeat="field in subSec.field">
<md-input-container md-no-float>
<input style="width: 100px; color: {{field.colorField}}" type="{{field.type}}" placeholder="{{field.placeHolder}}" ng-model="{{field.resumeField}}"/>
</md-input-container>
</div>
</div>
</div>
</div>
</div>
and this is my json structure
{
"name": "sample01",
"section": [
{
"position": {
"x": 100,
"y": 100
},
"subSection": [
{
"field": [
{
"resumeField": "resume.firstName",
"placeHolder": "firstName",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.lastName",
"placeHolder": "lastName",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "user.email",
"placeHolder": "email",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.currentAddress.city",
"placeHolder": "city",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.currentAddress.state",
"placeHolder": "state",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.currentAddress.country",
"placeHolder": "country",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.currentAddress.address1",
"placeHolder": "address1",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.currentAddress.address2",
"placeHolder": "address2",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
},
{
"resumeField": "resume.mobileNo",
"placeHolder": "mobileNo",
"type": "text",
"colorField": "resume.template.color2",
"size": 14
}
]
},
{
"label": "Education Summary",
"color": "resume.template.color1",
"size": 14,
"field": [
{
"resumeField": "resume.education",
"type": "array",
"colorField": "resume.template.color2",
"size": 12
},
{
"resumeField": "resume.education.domain",
"placeHolder": "domain",
"type": "text",
"colorField": "resume.template.color2",
"size": 12
},
{
"resumeField": "resume.education.specializtion",
"placeHolder": "specializtion",
"type": "text",
"colorField": "resume.template.color2",
"size": 12
},
{
"resumeField": "resume.education.from",
"placeHolder": "fromDate",
"type": "text",
"colorField": "resume.template.color2",
"size": 12
},
{
"resumeField": "resume.education.to",
"placeHolder": "toDate",
"type": "text",
"colorField": "resume.template.color2",
"size": 12
}
]
}
]
}
]
}
This is my controller.js
'use strict';
var myResume = angular.module('myResume');
myResume.controller('resumeController',['$scope', '$http', function($scope, $http) {
$http({
url: 'http://192.168.1.14:8000/api/getJson',
method: 'GET',
headers:
{
'Content-Type': 'application/json'
}
}).success(function(result, status, headers) {
/*var a = result;
console.log(a);*/
$scope.section = result.section;
/*$scope.details = result.section[0].subSection[0].field;*/
console.log($scope.section);
});
}]);
