CODEWITHSUNDEEP
angularjs
fyeah
fyeah

Reputation: 59

How to get data value from input field inside ng-repeat

This is my html.
I want to get values from input field and pass to the controller.

<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="field.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="field.variantValue" placeholder="value" >
  	</div>
 </fieldset>

Here is my controller:-

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

Upvotes: 1

Views: 2755

Answers (3)

ojus kulkarni
ojus kulkarni

Reputation: 1907

See its simple to pass your input value to controller.
Because angular supports two way data binding.
For Ex.

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

Here if you want to use input name in the controller then,

$scope.name = {};

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

In your case,
Your controller should be like:-

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

});

Upvotes: 1

osjo
osjo

Reputation: 131

Angular supports two way data binding so view and model are synchronized by framework.

According to comments i think this code should help You. 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>

Controller:

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

Upvotes: 0

Absar Hasan
Absar Hasan

Reputation: 184

May you need like this

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

And use modelName variable after form submit like $scope.modelName or this.modelName in your controller

Upvotes: 0

Related Questions