ダイナミックフォームinoutフィールドを動的ng-modelで作成する

Question

コントローラにJSONオブジェクトがあり、ng-repeatを使用して動的入力フィールドを生成したいとします。

$scope.keyValuePairs = [ 
    {id:""}, 
    {type:""}, 
    {brand:""}, 
    {category:""}, 
    {subCategory:""}, 
    {division:""} 
]; 

テンプレート

<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col-tablet" 
    ng-repeat="keyValue in keyValuePairs track by $index"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label full-width" 
     ng-repeat="(key,value) in keyValue"> 
     <input type="text" id="{{key}}" class="mdl-textfield__input" ng-model="eanForm[key]" 
      name="{{key}}"ng-required="true"/> 
     <label class="mdl-textfield__label" for="{{key}}">Enter {{key}}</label> 
     <span class="mdl-textfield__error" ng-show="eanForm.id.$dirty && 
      eanForm.id.$invalid" for="{{key}}">{{key}} required</span> 
    </div> 
</div> 

に私は、フォームフィールドを追加または削除するには、ユーザー権限を与えることができるようにダイナミックNG-モデルを作成します。フォームフィールドをダイナミックモデルにバインドするにはどうすればよいですか？

Answer 1

Javascriptを

$scope.fields = []; 
$scope.addFields = function() { 
    var maxId = getMax($scope.fields, "id"); 
    var id = maxId ? maxId + 1 : 1; 

    $scope.fields.push({ 
     id: id, 
     key: "", 
     value: "" 
    }); 
}; 

$scope.removeField = function(index) { 
    if(!index || index < 0) return; 

    $scope.fields.splice(index, 1); 
} 

function getMax(arr, prop) { 
    var max; 
    for (var i = 0; i < arr.length; i++) { 
     if (!max || parseInt(arr[i][prop]) > parseInt(max[prop])) max = arr[ 
      i]; 
    } 
    return max; 
} 

HTML

<div ng-repeat="field in fields"> 
    Field name: <input type="text" id="{{field.id + 'key'}}" ng-model="field.key" /> 

    Field Value: <input type="text" id="{{field.id + 'value'}}" ng-model="field.value" /> 
</div>