如何将 Angular JS 中动态生成的行的表数据从视图传递到 Angular 控制器

Question

我想使用具有文本框的指令从具有动态生成行的表中传递数据ng- repeat选择框作为列表到角度控制器。

下面是我正在使用的代码。在 Javascipt 中，您可以看到只有一个列是动态生成的，而所有其他列都是使用输入创建的。

<div ng-app="Home" ng-controller="TestController" data-ng-init="init()">
<table class="users">
<tr id="{{$index}}" ng-repeat="input in regdata">
<td>
<Label>{{input.Name}}</Label>
</td>
<td>
<select ng-options="s.Name for s in typeList" ng-model="SeltypeList" ng-change="getselectval(SeltypeList,$index)"></select>
</td>
<td>
<input type="text" ng-model="Label" />
</td>
<td ng-if="SeltypeList" ng-hide="SeltypeList.Name=='text'">                        
<input type="text" name="value" ng-model="value" />
</td>
</tr>
<tr>
<td>
<input type="button" class="button" name="Submit" value="Submit" ng-click="add(SeltypeList,Label,value)" />
</td>
</tr>                
</table>           
</div>    
<script>
var app = angular.module('Home', []);
app.controller('TestController', function ($scope, $http) {
$scope.add = function (SeltypeList,Label,Value) {
$http.post('/Test/Insert', $scope.model).then(function (res) {
debugger;
}); 
}

});
</script>

Answer 1

您需要使用双向数据绑定，因此单击按钮将获得选定的行数据。

<div ng-app="Home" ng-controller="TestController as TCtrl">
<table class="users">
<tr id="{{$index}}" ng-repeat="input in regdata track by $index">
<td>
<Label data-ng-model="TCtrl.input.name">{{input.Name}}</Label>
</td>
<td>
<select 
ng-options="s.Name for s in typeList" 
ng-model="TCtrl.input.SeltypeList" 
ng-change="TCtrl.getselectval(SeltypeList,$index)">
</select>
</td>
<td>
<input type="text" ng-model="TCtrl.input.Label" />
</td>
<td ng-if="SeltypeList" ng-hide="TCtrl.input.SeltypeList.Name=='text'">                        
<input type="text" name="value" ng-model="TCtrl.input.value" />
</td>
</tr>
<tr>
<td>
<input type="button" class="button" name="Submit" value="Submit" 
ng-click="add(SeltypeList,Label,value)" />
</td>
</tr>                
</table>           
</div> 

在控制器内部，您可以拥有如下代码，

<script>
var app = angular.module('Home', []);
app.controller('TestController', function ($http) {
var vm = this;  
vm.input = {
name : "",
SeltypeList : "",
Label : "",
value : ""
}
vm.add = function (SeltypeList,Label,Value) {
$http.post('/Test/Insert', vm.input).then(function (res) {
debugger;
}); 
}
});
</script>