AngularJS 获取ng-repeat动态生成的ng-model值实例详解


Posted in Javascript onNovember 29, 2016

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

              最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model=”变量”,什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家。

代码

html

<div>
  <div class="modal-header">
    <h3 class="modal-title">用例集全局参数配置</h3>
  </div>
  <div class="modal-body">
    <table class="table table-hover">
      <thead>
      <tr>
        <th>参数</th>
        <th>参数值</th>
      </tr>
      </thead>
      <tbody ng-repeat="param in params">
      <tr>
        <td>{{param}}</td>
        <td><input name="test" class="form-control" type="text" ng-trim="false" ng-model="$parent.conf[$index]"/></td>
      </tr>
      </tbody>
    </table>


  </div>

  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">
      应用
    </button>
    <button class="btn btn-warning" ng-click="cancel()">取消</button>
  </div>

</div>

JS

var ModalInstanceCtrl = function ($scope, $modalInstance, params) {
      $scope.params = params;
      $scope.conf = [];
      $scope.ok = function () {
        console.log($scope.conf);
        $modalInstance.close($scope.conf);
      };
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
    };

问题描述

因为ng-model是ng-repeat动态生成的,ng-model=”变量”,什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这个问题困扰了我一天,终于解决了。

解决方法

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

  1. 用$parent的原因是ng-repeat产生的,他会为每一个input生成一个子scope对象,而$parent表示用父类的scope,这样我们在JS文件中才能取到该值。
  2. $index代表的意思是ng-repeat="param in params"遍历时的下标
  3. conf是我们在js中的变量名实际效果

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

实际效果:

AngularJS 获取ng-repeat动态生成的ng-model值实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 #Javascript
JavaScript获取服务器端时间的方法
Nov 29 #Javascript
微信小程序链接传参并跳转新页面
Nov 29 #Javascript
JavaScript中Array对象用法实例总结
Nov 29 #Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 #Javascript
JavaScript构建自己的对象示例
Nov 29 #Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 #Javascript
You might like
PHP新手上路(五)
2006/10/09 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python简单日志处理类分享
2015/02/14 Python
让Python代码更快运行的5种方法
2015/06/21 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
毕业生文员求职信
2013/11/03 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
节约电力资源的建议书
2014/03/12 职场文书
自我评价优缺点范文
2015/03/11 职场文书
公司回复函格式
2015/07/14 职场文书
公司出差管理制度范本
2015/08/05 职场文书
公司董事任命书
2015/09/21 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL