如何在angularjs中动态地将嵌套json中的值绑定到ng-model

时间:2015-09-15 10:58:45

标签: javascript json angularjs angular-ngmodel

我正在研究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);
    });
}]);

0 个答案:

没有答案