如何将使用 ng-repeat 动态创建的 html 表单的输入元素的值传递给 ng-controller
Posted
技术标签:
【中文标题】如何将使用 ng-repeat 动态创建的 html 表单的输入元素的值传递给 ng-controller【英文标题】：How to pass values of input elements of the html form created dynamically using ng-repeat to the ng-controller 【发布时间】：2017-07-17 16:17:06 【问题描述】：我设计了如下表格。
<form id="123">
<div ng-repeat="x in data" class="[ form-group form-inline ]">
<input class="form-control input-md" type="checkbox" id="x.name" autocomplete="off" />
<div class="[ btn-group ]">
<label for="x.name" class="[ btn btn-success ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="x.name" class="[ btn btn-default active ]">
x.name
</label>
</div>
<input class="form-control input-md" type="text" id="x.period" autocomplete="off" />
<input class="form-control input-md" type="text" id="x.value" autocomplete="off" />
</div>
<button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button>
</form>
其中 ctrl 是在同一 html 页面中定义的 html 页面中的控制器引用。我现在无法理解如何将每个输入值传递给 addInfo 方法，因为输入标签的数量将是动态的，具体取决于“数据”的长度。当我尝试在输入字段中使用 ng-model=x.name 时，我收到“错误：[$parse:syntax] 语法错误：表达式 [ x.name] 从 [x.name] 开始。"
【问题讨论】：
能不能加plunkr或者显示你的js代码。 使用 ng-model 时移除 。这个 ng-model=x.name 应该是 ng-model="x.name" 当我使用 ng-model="x.name" 时， 之间的表达式正在被评估并且标签正在更改为 true 或 false基于用户点击。因此，我写了 ng-model="name" 并在控制器函数中尝试将其称为 $scope.name 时出现名称未定义错误。我的另一个疑问是，由于所有输入元素都是 ng-repeat，我如何在控制器函数中分别引用它们，以便我可以提交表单。 this.addSensorInfo=function()console.log('name' + $scope.name ); 【参考方案1】：var app = angular.module('animalApp', [ ]);
app.controller('AnimalController', ['$http', '$scope',function($http, $scope)
var type = this;
type.cows = [ ];
$http.get('animals.json').success(function(data)
type.cows = data;
);
app.controller("PanelController", function()
this.tab = 1;
this.selectTab = function(setTab)
this.tab = setTab;
;
this.isSelected = function(checkTab)
return this.tab === checkTab;
);
JSON
[
"name": "Angus",
"country": "UK"
,
"name": "Hereford",
"country": "Canada"
,
"name": "Dwarf Lulu",
"country": "Nepal"
,
"name": "Ongole",
"country": "India"
]<html ng-app="animalApp">
<section ng-controller="AnimalController as animalCtrl">
<ul ng-controller="PanelController as panel">
<li ng-class=" active: panel.isSelected(1)" ng-show="panel.isSelected(1)">
<ul>
<li ng-repeat="cow in animalCtrl.cows">
<h2>
<a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2)"></a>
</h2>
</li>
</ul>
</li>
<li ng-class=" active: panel.isSelected(2)" ng-show="panel.isSelected(2)">
<p>This animalCtrl.cow.name lives in animalCtrl.cow.country</p>
<a href="" ng-click="panel.selectTab(1)">Back to all cows</a>
</li>
</ul>
</section>
</html>【讨论】：
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。以上是关于如何将使用 ng-repeat 动态创建的 html 表单的输入元素的值传递给 ng-controller的主要内容，如果未能解决你的问题，请参考以下文章