如何从ng-repeat中的输入字段获取数据值

时间:2016-09-02 05:40:33

标签: angularjs

这是我的HTML 我想从输入字段获取值并传递给控制器​​。

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

这是我的控制器: -

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

3 个答案:

答案 0 :(得分:1)

查看将输入值传递给控制器​​的简单方法 因为angular支持双向数据绑定 对于前。

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

如果您想在控制器中使用输入name,那么

$scope.name = {};

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

在你的情况下,
你的控制器应该是: -

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

});

答案 1 :(得分:0)

你可能需要这样吗

class City < ActiveRecord::Base
  extend FriendlyId
  friendly_id :title, use: :slugged
end

  

在表单提交之后使用modelName变量,如控制器中的$ scope.modelName或this.modelName

答案 2 :(得分:0)

Angular支持双向数据绑定,因此视图和模型由框架同步。

根据评论,我认为此代码应该对您有所帮助。 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));
  }
}