AngularJS 获取ng-repeat动态生成的ng-model值实例详解  更新时间:2016年11月29日 11:49:32   作者:DoctorQ   这篇文章主要介绍了AngularJS 获取ng-repeat动态生成的ng-model值实例详解的相关资料,这里提供实例代码及实现效果图,需要的朋友可以参考下 AngularJS 获取ng-repeat动态生成的ng-model值               最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model=”变量”,什么变量,是未知的,所以你无法在$scope.”变量”取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家。 代码 html 用例集全局参数配置 参数 参数值 {{param}} 应用 取消 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]: 用$parent的原因是ng-repeat产生的,他会为每一个input生成一个子scope对象,而$parent表示用父类的scope,这样我们在JS文件中才能取到该值。 $index代表的意思是ng-repeat=”param in params”遍历时的下标 conf是我们在js中的变量名实际效果 我们在controller中定义了一个$scope.conf = [];就是一个数组,刚好通过上面的代码,为该数组添加了元素,然后我们通过scope.conf刚好把ng-model的所有元素自动保存了。 实际效果: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! 您可能感兴趣的文章: AngularJS解决ng-if中的ng-model值无效的问题 解决ng-repeat产生的ng-model中取不到值的问题 解决angularjs WdatePicker ng-model的问题 angular ng-model 无法获取值的处理方法 AngularJS ng-repeat ng-model 相关文章 AngularJs返回前一页面时刷新一次前面页面的方法 今天小编就为大家分享一篇AngularJs返回前一页面时刷新一次前面页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 详解AngularJS ui-sref的简单使用 本篇文章主要介绍了详解AngularJS ui-sref的简单使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 angular.fromJson与toJson方法用法示例 这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下 2017-05-05 AngularJs ng-route路由详解及实例代码 这篇文章主要介绍了AngularJs ng-route路由,这里整理相关资料及简单实例代码,有兴趣的小伙伴可以参考下 2016-09-09 Material(包括Material Icon)在Angular2中的使用详解 这篇文章主要介绍了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以参考下 2018-02-02 AngularJS入门之动画 AngularJS中ngAnimate模块支持动画效果,但是ngAnimate模块并未包含在AngularJS核心库中,因此需要使用ngAnimate需要在定义Module时声明对其的引用。下面通过本文我们来看看AngularJS动画的详细介绍。 2016-07-07 深究AngularJS中ng-drag、ng-drop的用法 本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS入门教程之AngularJS指令 AngularJS指令用于扩展HTML。本文给大家介绍AngularJS入门教程之AngularJS指令,感兴趣的朋友一起学习吧 2016-04-04 AngularJS实现图片上传和预览功能的方法分析 这篇文章主要介绍了AngularJS实现图片上传和预览功能的方法,结合HTML5实例形式对比分析了AngularJS图片上传的相关操作技巧与注意事项,需要的朋友可以参考下 2017-11-11 AngularJS 入门教程之HTML DOM实例详解 本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下 2016-07-07 最新评论

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-if中的ng-model值无效的问题
  • 解决ng-repeat产生的ng-model中取不到值的问题
  • 解决angularjs WdatePicker ng-model的问题
  • angular ng-model 无法获取值的处理方法
张贴在3