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

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的所有元素自动保存了。

实际效果：

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

赞 (0)

相关推荐

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • AngularJs ng-repeat 嵌套如何获取外层$index

    一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$index, 简直就如同砍瓜切菜般, 一切都那么行云流水, 简直太容易了, 于是有了下面这段代码. <!-- repeat data row --> <tr ng-repeat="row in rows track by row.id"> <td ng-repeat="col in row.columns track by col.id"> <

  • Angularjs的ng-repeat中去除重复数据的方法

    本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

  • angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"

  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • AngularJS实践之使用ng-repeat中$index的注意点

    发现问题 最近有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-controller="ListCtrl"> <li ng-repeat="

  • C#动态创建button按钮的方法实例详解

    C#动态创建button按钮的方法实例详解 C#编程中经常需要动态创建,本文主要介绍C#动态创建button按钮的方法,涉及C#按钮属性动态设置的相关技巧,以供借鉴参考.具体实现方法如下: 例子: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.T

  • Android获取arrays.xml里的数组字段值实例详解

    Android获取arrays.xml里的数组字段值实例详解 比如在arrays.xml里: <!--leo added for KYLIN-496--> <string-array name="reboot_item"> <item>Reboot</item> <item>Recovery</item> <item>BootLoader</item> </string-array&g

  • php生成条形码的图片的实例详解

    php生成条形码的图片的实例详解 因为用户的需要  写了一个条形码:用php生成一个条形码的图片  这个大家应该比我要好很多的吧,在自己项目的根目录下建立一个测试文件(直接把下面的代码放进去运行一下看看,我也是抄袭别人的),在实际的项目中你可以将下面的代码封装到一个公共类文件下的一个函数,然后调用. class testinfo{ function UPCAbarcode($code) { $trans_code = $code; $lw = 2.2; $hi = 40; $Lencode =

  • 关于动态执行代码(js的Eval)实例详解

    熟悉javascript的朋友对Eval()函数可能都不会陌生,我们可以用它来实现动态代码的执行,我自己甚至写过一个网页专门用来计算算术表达式的,计算能力上比google.baidu的计算器还要好一些,至少精度要高,但是如果超出了四则运算的话,表达式的形式会复杂很,比如以百度给出的例子: log((5+5)^2)-3+pi需要写成Math.log(Math.pow(5+5,2))*Math.LOG10E-3+Math.PI才能用Eval进行计算,对于这一点我还没有想到理想的解决方案.好了,这不是

  • Java 生成随机字符串数组的实例详解

    Java 生成随机字符串数组的实例详解 利用Collections.sort()方法对泛型为String的List 进行排序.具体要求: 1.创建完List<String>之后,往其中添加十条随机字符串 2.每条字符串的长度为10以内的随机整数 3.每条字符串的每个字符都为随机生成的字符,字符可以重叠 4.每条随机字符串不可重复 将涉及到的知识有: String.StringBuffer.ListArray.泛型.Collections.sort.foreach.Random等相关知识,算是

  • Android 动态注册监听网络变化实例详解

    Android 动态注册监听网络变化实例详解

    Android 动态注册监听网络变化实例详解 新建一个BroadcastTest项目,然后修改MainActivity中的代码,如下: public class MainActivity extends AppCompatActivity { private IntentFilter intentFilter; private NetworkChangeReceiver networkChangeReceiver; @Override protected void onCreate(Bundle

  • Android Studio获取SHA1值实例详解

    Android Studio获取SHA1值实例详解

    Android Studio获取SHA1值实例详解 前言 使用百度地图的小伙伴们都会知道获取百度地图的密钥需要SHA1和包名,在Eclipse中,我们可以很方便的得知SHA1值,如下图: 但是在Android Studio中,该怎么获取SHA1的值呢?不要着急,马上呈上~ Android Studio获取SHA1值 强大的Android Studio为我们提供了Terminal这个工具,我们可以通过他进行相应命令从而获取所需内容. Java中提供了Keytool工具去让我们管理证书,那么接下来我

  • python生成二维码的实例详解

    python生成二维码的实例详解 版本相关 操作系统:Mac OS X EI Caption Python版本:2.7 IDE:Sublime Text 3 依赖库 Python生成二维码需要的依赖库为PIL和QRcode. 坑爹的是,百度了好久都没有找到PIL,不知道是什么时候改名了,还是其他原因,pillow就是传说中的PIL. 安装命令:sudo pip install pillow.sudo pip install qrcode 验证是否安装成功,使用命令from PIL import

  • Python生成短uuid的方法实例详解

    python的uuid都是32位的,比较长,处理起来效率比较低, 本算法利用62个可打印字符,通过随机生成32位UUID,由于UUID都为十六进制,所以将UUID分成8组,每4个为一组,然后通过模62操作,结果作为索引取出字符, 最后生成的Uuid,只有8位,代码如下: uuid4,可以换成uuid1 from uuid import uuid4 uuidChars = ("a", "b", "c", "d", "e

  • python随机生成库faker库api实例详解

    废话不多说,直接上代码! # -*- coding: utf-8 -*- # @Author : FELIX # @Date : 2018/6/30 9:49 from faker import Factory # zh_CN 表示中国大陆版 fake = Factory().create('zh_CN') # 产生随机手机号 print(fake.phone_number()) # 产生随机姓名 print(fake.name()) # 产生随机地址 print(fake.address())

随机推荐