지시문의 변경 모델

Question

사용자 지정 지시문을 사용하여 UI를 만들고 싶습니다. 나는대로 그 일을하고있다 :

지침 :

module.directive('testData', function() { 
return { 
    templateUrl: 'template/mainTemplate.html' 
}; 

});

템플릿 :

<form class="class"> 
<div ng-repeat='mainJson in mainJsonData'> 
    <div class='mainJson.divClass'> 
     <input type="{{mainJson.inputType}}" class="{{mainJson.inputClass}}" placeholder="{{mainJson.placeHolder}}" maxlength='{{mainJson.inputMaxLength}}' ng-model="mainJson.name"/> 
    </div> 
</div> 

JSON 데이터

[ 
{"divClass":"form-group","inputType":"text","inputClass":"form-control","inputNgModel":"name","inputMaxLength":"10","placeHolder":"Name"}, 
{"divClass":"form-group","inputType":"text","inputClass":"form-control","inputNgModel":"city","inputMaxLength":"10","placeHolder":"city"}, 
{"divClass":"form-group","inputType":"text","inputClass":"form-control","inputNgModel":"mobile","inputMaxLength":"10","placeHolder":"mobile"} 
] 

하지만 템플릿 NG-모델이 제대로 작동하지 않습니다. UI를 다음과 같이 작성합니다.

<input type="text" ng-model="mainJson.inputNgModel" maxlength="10" placeholder="Name" class="form-control"> 

올바르지 않습니다. 그것은해야합니다 같은 :

<input type="text" ng-model="name" maxlength="10" placeholder="Name" class="form-control"> 

Answer 1

확인이 이것은 당신이 필요로하는 것입니다 plunkr

에서 작업 :

<input ng-model="mainJson[mainJson.inputNgModel]" /> 

배열의 속성 값 mainJson.inputNgModel에서 객체의 참조에

그냥 바인드 NG 모델 mainJson. 동적 속성의 이름을 얻고 싶다면

var getProperty = arr.thisPropertyIKnow; 

이, 이렇게 여기 이해하기

포인트는 액세스하려는 배열의 속성을 알고 있다면, 당신은 이런 식으로 그것을 할 것입니다 :

var thisPropertyIDontKnow = 'valueAtRunTime'; 
var getProperty = arr[thisPropertyIDontKnow]; 

그림이있는 완전한 템플릿.

app.directive('testData', function() { 
    return { 
    templateUrl: 'mainTemplate.html', 
    controller: function($scope) { 
     $scope.mainJsonData = [{ 
     "divClass": "form-group", 
     "inputType": "text", 
     "inputClass": "form-control", 
     "inputNgModel": "name", 
     "inputMaxLength": "10", 
     "placeHolder": "Name" 
     }, { 
     "divClass": "form-group", 
     "inputType": "text", 
     "inputClass": "form-control", 
     "inputNgModel": "city", 
     "inputMaxLength": "10", 
     "placeHolder": "city" 
     }, { 
     "divClass": "form-group", 
     "inputType": "text", 
     "inputClass": "form-control", 
     "inputNgModel": "mobile", 
     "inputMaxLength": "10", 
     "placeHolder": "mobile" 
     }]; 
    } 
    }; 
});