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


Posted in Javascript onJanuary 21, 2016

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

例如:

html:

<body>
<div ng-controller="selectController">
  <div ng-repeat="pop in citylist">
    <select ng-model="p">
      <option value="" style="display:none;">{{pop.pop}}</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <button ng-click="cs()">ceshi</button>
  </div>
</div>
</body>

js:

<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.cs=function(){
      console.log($scope.p);
    }
  })
</script>

很简单的功能,想要在点击更改按钮时获取select当前选中的数据内容,但是你会发现这样写只能得到undefined,此时有的人会提出可以将p赋予成为一个对象,通过key:value的方式来保存每一次的选择

$scope.p={};

这样确实没问题,但是会有一个新的问题那就是只要改动了一项,那么所有的内容都会跟着一起改变,那么有没有更好的方法呢?

只要一个小小的改动

html:

<button ng-click="cs(p)">ceshi</button>

js:

$scope.cs=function(p){
      console.log(p);
    }

这只是个简单的例子,如大家在实际使用时发现有别的问题也可以在评论中留言。

Javascript 相关文章推荐
JS模板实现方法
Apr 03 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
js实现的二分查找算法实例
Jan 21 #Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 #Javascript
angularjs表格分页功能详解
Jan 21 #Javascript
使用angularjs创建简单表格
Jan 21 #Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
Javascript中神奇的this
Jan 20 #Javascript
javascript实现图片轮播效果
Jan 20 #Javascript
You might like
给初学PHP的5个入手程序
2006/11/23 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
javascript下function声明一些小结
2007/12/28 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
django admin组件使用方法详解
2019/07/19 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python流程控制常用工具详解
2020/02/24 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python异常处理机制结构实例解析
2020/07/23 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
办公室主任先进事迹
2014/01/18 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
语文教师求职信范文
2015/03/20 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
分享几个简单MySQL优化小妙招
2022/03/31 MySQL