AngularJS中获取ng-repeat动态生成的ng-model值

问题描述

需求：需要动态 添加或删除 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 的所有值自动保存了。

效果如图：

QQ截图20170803161925.png

作者：竿牍
链接：https://www.jianshu.com/p/b0536cee8b0c