关于这个问题,这几天一直被困扰,始终没找到好的解决方案。最终,不得不去Google Group上面咨询了一下。终于,这个问题得以解决,感觉整个人都好了。链接https://groups.google.com/forum/#!topic/angular/ObW4ar0YUms

在实际开发的过程中,可能会遇到以下的情况:

  • 前端写页面的时候,会遇到需要动态添加输入框的情况
  • 给后台发送数据的时候,同一个类型的数据要发送多个

那么,这个时候,需要将这些相同的ng-model动态添加到一个数组中一并发送给后台人员。

所以,最终我使用了下面的这种解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div ng-app="myApp">
<div ng-controller="mainCtrl">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<!-- main form, data from here -->
<form action="" class="form-horizontal">
<div class="form-group" ng-repeat="item in riskList">
<input type="text" class="form-control" ng-model="item.name" />
<input type="text" class="form-control" ng-model="item.value" />
</div>
</form>
<!-- endform -->
</div>
</div>
<!-- button used to add input area -->
<div class="row">
<div class="col-md-offset-5 col-md-2">
<button class="btn btn-success btn-block" ng-click="addModels()">Add Input</button>
</div>
</div>
<!-- button used to log out -->
<div class="row">
<div class="col-md-offset-5 col-md-2">
<button class="btn btn-success btn-block" ng-click="getFormData()">Get FormData</button>
</div>
</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular
.module('myApp', [])
.controller('mainCtrl', ['$scope', function ( $scope ) {
// initialize first
$scope.riskList = [];
$scope.addModels = function () {
$scope.riskList.push({
name: '',
value: ''
});
};
$scope.getFormData = function () {
console.log($scope.riskList);
};
}]);

之前,还一直想着使用指令中的DOM操作来实现,经过国外一位友人的指点之后,发现,使用Angular的时候确实就不能再使用类似于使用jQuery的思想了。得按照Angular的设计思想来写代码。

算是又学了一招吧。

可以在这里查看完整的可以运行的例子:
http://codepen.io/Erichain/pen/QNgJgL?editors=1010