angularjs在ng-repeat中使用ng-model遇到的问题
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变。上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决。
例如:
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 | < 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:
1 2 3 4 5 6 7 8 9 | <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的方式来保存每一次的选择
这样确实没问题,但是会有一个新的问题那就是只要改动了一项,那么所有的内容都会跟着一起改变,那么有没有更好的方法呢?
只要一个小小的改动
html:
js:
这只是个简单的例子,如大家在实际使用时发现有别的问题也可以在评论中留言。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
AngularJS ng-repeat指令及Ajax的应用实例分析
这篇文章主要介绍了AngularJS ng-repeat指令及Ajax的应用,结合实例形式分析了ng-repeat指令的功能及ajax请求交互相关操作技巧,需要的朋友可以参考下2017-07-07使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧2021-07-07AngularJS实现的select二级联动下拉菜单功能示例
这篇文章主要介绍了AngularJS实现的select二级联动下拉菜单功能,结合完整实例形式分析了AngularJS实现二级联动菜单的具体操作步骤与相关实现技巧,需要的朋友可以参考下2017-10-10详解Angular系列之变化检测(Change Detection)
这篇文章主要介绍了详解Angular系列之变化检测(Change Detection),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论