AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
2016-10-17 19:11
821 查看
场景:
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
相关文章推荐
- 用js+jsp实现在同一个下拉列表中,动态生成多级select选项
- 使用JS,如何给下拉列表动态的添加一个option 选项?
- 动态给select下拉列表添加选项option
- 一般操作需要导入的jquery包(jquery.js包)和 jquery操作select下拉列表(取值及设置选中某一个option)
- select动态添加option与动态设置下拉框默认选项(selected)的问题(原创)
- select下拉列表, 从数据库查询,动态添加选项option
- select 下拉列表(添加,删除option对象)
- 关于IE6中遇到的select下拉框遇到的一个问题
- jquery mobile动态生成的下拉列表无法显示默认选择值的问题
- 一个非常好用的jquery 操作表单下拉列表select 插件
- 一个JS图片放大镜,实现动态记录的图片放大,避免内存泄露,解决IE6下无法遮盖select控件问题
- 下拉列表select动态初始化 (JSP页面)
- web开发(脚本和动态语言) 编辑 下拉列表 select控件 可编辑
- select 下拉列表相关的问题
- asp.net动态生成select下拉列表内容
- 固定宽度下拉列表中option内容显示不全问题解决方法
- 多个下拉列表(select)不能取重复值判断-动态增加输入框-模仿CSDN结贴时分数判断-但无层提示-Ajax取值(全部源码)
- 为select动态添加option问题
- Axure RP Pro - 相关问题 - 在规格文档中动态面板中的droplist下拉列表框部件会重复输出选项列表
- select网页下拉列表与div层遮盖问题