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

时间: 2024-08-09 14:42:34

AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题的相关文章

Jquery获取select option动态添加自定义属性值失效

Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/39096/390963333.html 为了帮助网友解决“Jquery获取select optio”相关的问题,中国学网通过互联网对“Jquery获取select optio”相关的解决方案进行了整理,用户详细问题包括:jqueryselectie9  function GetFenceItemData(

【JavaScript】下拉列表select中在value传递多个值,取出其option显示值,并应用此作为导航

对于下拉列表select,众所周知,其值就是选中的option中的value值,可是如果需要取出每一个option的显示值,那又如何做呢?虽然没什么必要取出option的显示值,但是如果有时候确实需要这个显示值,在javascript的脚本做点什么呢?另外,如果要再value处传递多个值呢?那又改如何呢? 一.取出option的显示值 你可以先传递整个select过去脚本,假设传过去的形式参数是obj,然后利用obj.options[obj.selectedIndex].innerHTML来取出

让 select 的 option 标签支持事件监听(如复制操作)

这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为它是系统OS级别处理的 想自定义option的样式,很多人会建议用 <ul> <li> 标签来辅助同步操作与值 想对option进行事件监听,有一个tip:当给select显示设置了size 属性且值 大于1 时,才能监听 近来产品也提了个鼠标操作复制option值的需求,就利用这个s

有关attribute和property,以及各自对select中option的影响

这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性.   attribute property 设置方法 option.setAttribute('selected', true) option.getAttribute('selected') option.selected = true dom节点表现 会表现在html节点上.打开控制台,可以看到 <option selected=true></option> 不会表现在html中.打开控制台,孤零零的 :

模拟下拉列表select

<!doctype html> <html> <head> <meta charset="utf-8"> <title>模拟下拉菜单</title> <style> * { margin: 0; padding: 0; } body { font: 14px '微软雅黑'; color: #555; padding:50px; } ul { list-style: none; } p { margin-

JS-005-JavaScript 操作常见 web 元素之五-常见下拉列表 Select 和 datalist

下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以常规的 Select 下拉列表来讲述 js 对下拉列表的常规操作,其中 datalist 算是此文稍许的延伸,也可看做一种简单的下拉列表,遗憾的是 IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 datalist 标签,其主要应用于输入或搜索文字的自动完成功能等,感兴趣的亲们可以详

html select与option标签

1.select 元素 select 元素可创建单选或多选菜单.<select> 元素中的 <option> 标签用于定义列表中的可用选项 常用属性如下: autofocus:规定在页面加载后文本区域自动获得焦点. disabled:规定禁用该下拉列表. form:规定文本区域所属的一个或多个表单. multiple:规定可选择多个选项. name:规定下拉列表的名称. required:规定文本区域是必填的. size:规定下拉列表中可见选项的数目. 2.option 元素 op

js 操作select和option

js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option function addOption(){ //根

下拉列表Select的操作

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>对下拉列表select的基本操作</title><script src="jquery-1.8.2.min.js"></script></head> <body><select nam