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 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
swiper实现导航滚动效果
Dec 13 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php标签云的实现代码
2012/10/10 PHP
php导入模块文件分享
2015/03/17 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
详解ES6中的let命令
2020/04/05 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python Socket编程详细介绍
2017/03/23 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
2014年施工员工作总结
2014/11/18 职场文书
爱情保证书
2015/01/17 职场文书
自主招生专家推荐信
2015/03/26 职场文书
排球赛新闻稿
2015/07/17 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python