AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景:
Select初始化之后,选中select的某个选项
通过AngularJS更新select的选项
错误写法:
HTML(使用ng-repeat)
<div ng-app="TestApp">
<div ng-controller="TestAppCtrl">
<label>options变化之后会出错:</label>
<select ng-model="selectedSite">
<option value="" >---请选择---</option>
<option ng-repeat="site in sites" value="{{site.url}}">{{site.name}}</option>
</select>
<input type="button" ng-click="reload()" value="更新">
</div>
<div>
var testApp = angular.module('TestApp', []);
testApp.controller('TestAppCtrl', ['$scope',
function($scope) {
var sites=[{"url":"http://www.baidu.com","name":"百度"},
{"url":"http://www.google.com","name":"谷歌"},
{"url":"http://www.yahoo.com","name":"雅虎"},
]
var sites2=[{"url":"http://www.gmail.com","name":"GMAIL"},
{"url":"http://www.abc.com","name":"ABC"},
{"url":"http://www.xyz.com","name":"XYZ"},
] var Init = function(){
$scope.sites=sites;
} var Reload = function(){
$scope.sites=sites2;
}
//加载页面之后初始化
Init();
//注册更新按钮的点击事件,点击之后更新select的option列表
$scope.reload=Reload;
}]
);
按照场景描述的步骤操作之后,下拉菜单变成如下所示(多出了一个option,option的value和步骤一所选的选项有关,我第一步选了“百度”):
正确写法:
HTML(使用ng-options), javascript不变
<div ng-app="TestApp">
<div ng-controller="CorrectedAppCtrl">
<label>正确写法:</label>
<select ng-model="selectedSite" ng-options="site as site.name for site in sites track by site.url">
<option value="" >---请选择---</option>
</select>
<input type="button" ng-click="reload()" value="更新">
</div>
<div>
官方文档说这两种方式都可以实现下拉列表,也说了一些ngOptions优于ngRepeat的点。但是没看到说会引起这个原因,root cause还是不知道。总之,以后用ngOptions吧。
https://docs.angularjs.org/api/ng/directive/ngOptions
AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题的更多相关文章
- 关于angularjs的select下拉列表存在空白的解决办法
angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option ng-repeat></option>option中 ...
- 使用js 在IE和火狐firfox 里动态增加select 的option
使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...
- 纯js遍历json获取值动态为select添加option
遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...
- #Java Web累积#JS动态加载所有同name的select的option
项目需求: 某一页面,页面使用多列table,每个table中有同相同的<select>,select的option不确定,根据Server端的配置来,所以option需要动态加载: ...
- Jquery获取select option动态添加自定义属性值失效
Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...
- 让 select 的 option 标签支持事件监听(如复制操作)
这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...
- 有关attribute和property,以及各自对select中option的影响
这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性. attribute property 设置方法 option.setAttribute('selected', true ...
- js 操作select和option
js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...
- JS-005-常见下拉列表 Select 和 datalist
下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以 ...
随机推荐
- TortoiseGIT的安装过程详解
TortoiseGIT简介 TortoiseGIT 是Git版本控制系统的一个免费开源客户端,它是git版本控制的 Windows 扩展.可以使你避免使用枯燥而且不方便的命令行.它完全嵌入 Windo ...
- [LeetCode] The Skyline Problem 天际线问题
A city's skyline is the outer contour of the silhouette formed by all the buildings in that city whe ...
- [LeetCode] Surrounded Regions 包围区域
Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...
- SASS 入门笔记
参考资料: SASS 用法指南 SASS 语法 Sass Basics SASS_REFERENCE sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 ...
- Javascript身份证号码验证
"来来来,坐这儿". "什么?我可是有身份的人,怎么能和你坐一块儿".沛笠晃了晃手里的身份证,不屑说道. "你咋不上天呢?有身份还喝油条吃豆浆&quo ...
- http 413 wcf
在网上搜到413的解决办法有多种,看具体项目找到对应的解决办法 如果是wcf返回的413,与serverRuntime无关,只要在Binding中设置最大接收值即可, <binding name ...
- 【URAL 1519】Formula 1
http://acm.timus.ru/problem.aspx?space=1&num=1519 调了好久啊.参考(抄)的iwtwiioi的题解. 如果想要题解,题解在<基于连通性状态 ...
- Jmeter学习笔记ONE
最近想学一些关于性能测试方面的知识,其实之前已经初步了解了Jmeter工具,它是一个轻量级的性能测试工具,开源并且免费,相比于Loadrunner来说用起来更简便. JMeter 可以用于对服务器.网 ...
- java中静态方法和静态类的学习
静态内部类可以有静态成员,而非静态类 则不能有静态成员 静态内部类的非静态成员可以访问外部类的静态成员,而不可以访问外部类的非静态成员 非静态方法与对象相关,而静态方法属于类的方法, 总上所述:静态方 ...
- FFT 快速傅里叶变换浅析
终于补完坑了哈哈哈 这个东西很神奇,看了半天网上的解释和课件,研究了很长时间,算是大概明白了它的原理. 话不多说先上图. 我们要求的h(x)=f(x)*g(x),f(x)=Σai*x^i,g(x)=Σ ...