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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
Javascript confirm多种使用方法解析
Sep 25 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实现倒计时效果
2015/12/19 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Django自定义分页效果
2017/06/27 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
简单的命令查看安装的python版本号
2020/08/28 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
就业意向书范文
2014/04/01 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL