ng-repeatの入力フィールドからデータ値を取得する方法

Question

これは私のhtmlです。
入力フィールドから値を取得してコントローラに渡したいとします。ここで

<fieldset class="col-lg-12" ng-repeat="field in newField"> 
 
    \t <div class="col-lg-6" style="padding:0 16px 0 0;">Variants 
 
    \t <input type="text" class="form-control" ng-model="field.variantName" placeholder="Option name"> 
 
    \t </div> 
 
    \t <div class="col-lg-6" style="padding:0 0 0 16px"><br> 
 
    \t <input type="text" class="form-control" ng-model="field.variantValue" placeholder="value" > 
 
    \t </div> 
 
</fieldset>

私のコントローラである： -

add(prod) { 
 
     var id = this.saveddataprod.length; 
 
     var json = { 
 
        "id"   : id, 
 
        "variantsName"  : prod.variantsName, 
 
        "variantsValue" : prod.variantsValue 
 
       }; 
 
     this.saveddataprod.unshift(json); 
 
    };

Answer 1

を提出フォーム後MODELNAME変数を使用します。
角度は双方向データバインディングをサポートしているためです。
Ex。ここで

<form name="myForm" ng-submit="registration()"> 
    <label> Name </lbel> 
    <input ng-model="name" /> 
</form> 

あなたは、コントローラにあなたのケースで

$scope.name = {}; 

$scope.registration = function() { 
    console.log("You will get the name here ", $scope.name); 
}; 

を入力nameを使用したい場合は、
あなたのコントローラは次のようにする必要があります： -

.controller("myController", function ($scope) { 
    $scope.newField = // add data which you want 

}); 

Answer 2

あなたはこの

<fieldset class="col-lg-12" ng-repeat="field in newField"> 
<div class="col-lg-6" style="padding:0 16px 0 0;">Variants 
    <input type="text" class="form-control" ng-model="modelName[$index].variantName" placeholder="Option name"> 
</div> 
<div class="col-lg-6" style="padding:0 0 0 16px"><br> 
    <input type="text" class="form-control" ng-model="modelName[$index].variantValue" placeholder="value" > 
</div> 

のような必要がある場合があります

、コントローラにご入力値を渡すために、その簡単なを参照してください、あなたのコントローラで$ scope.modelNameまたはthis.modelNameよう

Answer 3

アンギュラサポートビューとモデルがフレームワークによって同期されるような双方向データバインディング

コメントによると、このコードはあなたに役立つはずだと思います。 https://jsfiddle.net/y3Lhf6zo/2/

HTML：

<div ng-controller="MyCtrl" class="container"> 
    <h1>Variants</h1> 
    <fieldset class="row" ng-repeat="field in allFields"> 
     <div class="col-lg-6"> 
     <input type="text" class="form-control" ng-model="field.variantName" placeholder="Option name"> 
    </div> 
    <div class="col-lg-6"> 
     <input type="text" class="form-control" ng-model="field.variantValue" placeholder="value" > 
     <br/> 
    </div> 
    </fieldset> 
    <input class="btn-primary btn-block" type="submit" value="Add new row" ng-click="addNewRow()"> 
    <input class="btn-primary btn-block" type="submit" value="Show all" ng-click="showObject(allFields)"> 
</div> 

コントローラー：

function MyCtrl($scope) { 
    $scope.allFields = [ 
        {variantName : "Name0", 
        variantValue : "Value0"}, 
        {variantName : "Name1", 
        variantValue : "Value1"}]; 

    $scope.addNewRow = function() { 
     $scope.allFields.push({variantName  : null, 
          variantValue : null}); 
    } 
    $scope.showObject = function(object) { 
     alert(JSON.stringify(object)); 
    } 
}