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

　　问题描述：因为ng-model是ng-repeat动态生成的，ng-model=”变量”，什么变量，是未知的，所以你无法在$scope."变量"取到值，就算取到值也是其中一个值。

html:

<div class="form-horizontal">
    <div class="modal-header">
        <h4 class="modal-title">{{title}}</h4>
    </div>
    <div class="modal-body">
        <div class="clearfix">
            <div class="form-inline margin-top-20">
                <button class="btn btn-xs btn-info" ng-click="addMore()">批量新增</button>
                <button class="btn btn-xs btn-info margin-left-20" ng-click="addOne()">手动新增</button>

            </div>
            <table  class="table table-bordered table-striped table-center" style="margin-top: 20px;width: 400px;">
                <thead>
                <tr>
                    <th rowspan="2" class="inner" style="vertical-align: middle !important;">批次号</th>
                    <th rowspan="2" style="vertical-align: middle !important;">是否展示</th>
                    
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="(index,tabledata) in channels">
                    <td ng-bind='tabledata.batch_name'></td> 
                    <td>
                        {{$parent.conf[$index]}}
                        <label>

                            <input type="radio" value="1" ng-model="$parent.conf[$index]">
                            是
                        </label>
                        <label>
                            <input type="radio" value="0" ng-model="$parent.conf[$index]">
                            否
                        </label> 
                    </td>                
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
<div class="modal-footer" style="text-align: center;">
    <button class="btn btn-success" type="button"  name="submit" ng-click="ok()">保存</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>
</div>

js(局部):

$scope.ok = function() { 
            console.log($scope.conf);
            $scope.str = '';
            $scope.arr = [];
            angular.forEach($scope.channels,function(value,index,array){                
               console.log($scope.conf[index]);
               value.is_view=$scope.conf[index] ;
               $scope.str = value.id+'_'+value.is_view;
               $scope.arr.push($scope.str);

               // console.log(value.is_view);
            })
            console.log($scope.arr)

            $scope.save();
            // $uibModalInstance.close();
        };

 

　　解决办法：

　  1、ng-repeat的作用域学习

• ng-repeat会在上一级作用域名中创建一个子作用域；
• 此时如果需要在子作用域中调用父作用域的变量，则可以使用$parent.variableName来调用。

• ng-repeat中调用和父作用域同名的变量，无$parent前缀则指的是调用的子作用域的变量，就像局部变量一样。

• ng-repeat中的$index： element in elements  当前element在elements中的下标数。例如第一个element，则$index=0. 

　　2、首先ng-model设置为$parent.conf[$index]

• 用$parent的原因是ng-repeat产生的，他会为每一个input生成一个子scope对象，而$parent表示用父类的scope，这样我们在JS文件中才能取到该值
• $index代表的意思是ng-repeat="param in params"遍历时的下标
• conf是我们在js中的变量名（曾经尝试了不设置这个conf数组，将ng-model设置为$parent[$index]，结果导致更改了数据，在js获取不到改变后的值，一直是原来默认的数据）

　　3、我们在controller中定义了一个$scope.conf = [];就是一个数组，刚好通过上面的代码，为该数组添加了元素，然后我们通过scope.conf刚好把ng-model的所有元素自动保存了。

　　   

转载于:https://www.cnblogs.com/xiaoli52qd/p/6829968.html