问题描述
需求:需要动态 添加或删除 input表单,问了度娘,ng-repeat找到了一个思路,但问题来了。
因为ng-model 是ng-repeat 动态生成的,ng-model=”变量”,什么变量,是未知的。所以你无法通过单个的$scope."变量" 取到所有值。
找啊找办法,终于找到了办法。
注意:ng-model="model{{$index}}" 是万万不可以的。
解决方法
Html代码
<div ng-repeat="param in params">
<input type="text" ng-model="$parent.model[$index]" />
<span ng-click="decr($index)"><!--减一行--></span>
</div>
<!--加一行-->
<div>
<button ng-click="incr()">新增</button>
</div>
用$parent 的原因是ng-repeat 产生的,他会为每一个input 生成一个子scope 对象,而$parent 表示用父类的scope,这样我们在JavaScript文件中才能取到该值。详情可以参考我的另一篇文章关于angular中$parent
$index 代表的意思是ng-repeat="param in params" 遍历时的下标 , model 是我们在js中的变量名
JavaScript代码
// 增加一行
$scope.incr = function () {
$scope.params.splice(1, 0, {key: new Date().getTime(), value: ""});
};
// 减少一行
$scope.decr = function ($index) {
// 如果数大于1,可删除
if ($scope.params.length > 1) {
$scope.params.splice($index, 1);
$scope.model.splice($index, 1);
}
};
// 存储用户输入的值
$scope.model = [];
// 保存
$scope.save = function(){
console.log($scope.model);
};
我们在controller 中定义了一个$scope.model = [];
就是一个数组,刚好通过上面的代码,为该数组添加了元素,然后我们通过$scope.model 刚好把ng-model 的所有值自动保存了。