zoukankan      html  css  js  c++  java
  • AngularJS中获取ng-repeat动态生成的ng-model值

      问题描述:因为ng-modelng-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; 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的所有元素自动保存了。

         

  • 相关阅读:
    Python 中特殊变量/方法命名规则说明(特别是私有变量)及使用实例
    博客(文本)编辑工具Markdown使用初体验
    Vue2.0关于生命周期和钩子函数
    Vue2.0中的路由配置
    Vue项目中引入外部文件(css、js、less)
    利用vue-cli创建Vue项目
    vue+webpack构建项目
    VueJs2.0建议学习路线
    Python基础 :正则表达式
    Python框架 :WEB框架
  • 原文地址:https://www.cnblogs.com/xiaoli52qd/p/6829968.html
Copyright © 2011-2022 走看看