我正在研究angularjs项目,因为我比较新鲜,我对ng-model指令有疑问...我需要知道如何在html页面中动态绑定嵌套json到ng-model的值...在下面的代码中,我想在ng-model中绑定resumeField值(也是json对象=>(resume.firstName))。简单来说,resume json中firstName的值应该被指定为resumeField的值,并且应该绑定到html页面中的ng-model。它也应该是可编辑的。而已。如果有人知道,请回复你的答案......提前致谢...
这是我的HTML代码
<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>
这是我的json结构
{
"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
}
]
}
]
}
]
}
这是我的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);
});
}]);