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 Archive Network 集合
May 12 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 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教程 预定义变量
2009/10/23 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js树形控件脚本代码
2008/07/24 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
使用python存储网页上的图片实例
2018/05/22 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
会计核算科岗位职责
2014/03/19 职场文书
电力安全事故反思
2014/04/27 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL