指示のng-modelを変更してください

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"> 

これは正しくありません。配列のプロパティ値mainJson.inputNgModelでのオブジェクトの参照に

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

だけバインドNG-モデル：

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

Answer 1

うち、この作業plunkrこれは何が必要ですチェック：それは次のようにする必要がありますmainJson。ここで理解する

ポイントはあなたがアクセスしたい配列の性質を知っていれば、あなたはこのようにそれを行うことです。

var getProperty = arr.thisPropertyIKnow; 

あなたが動的プロパティの名前を取得したい場合は、次の操作を行います。

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

イラスト付きの完全なテンプレート。

<form class="class"> 
    <p>Inside directive</p> 

    <div ng-repeat='mainJson in mainJsonData'> 
    <div class="{{mainJson.divClass}}"> 
     <input ng-model="mainJson[mainJson.inputNgModel]" type="{{mainJson.inputType}}" class="{{mainJson.inputClass}}" placeholder="{{mainJson.placeHolder}}" maxlength='{{mainJson.inputMaxLength}}' /> 
    </div> 
    <p>value of ng-model is : {{mainJson.inputNgModel}}</p> 
    <p>Dipplay the value inside the input field: {{mainJson[mainJson.inputNgModel]}}</p> 
    </div> 
</form> 

また、あなたのディレクティブの内側に、あなたは配列を初期化する必要があります。

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" 
     }]; 
    } 
    }; 
});