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 = dule('TestApp', []);
function($scope) {
var sites=[{"url":"www.baidu","name":"百度"},
{"url":"le","name":"⾕歌"},
{"url":"www.yahoo","name":"雅虎"},
]
var sites2=[{"url":"ail","name":"GMAIL"},
{"url":"www.abc","name":"ABC"},
{"url":"","name":"XYZ"},
]
var Init = function(){
$scope.sites=sites;
}
var Reload = function(){
$scope.sites=sites2;
}
      　//加载页⾯之后初始化
Init();
      　//注册更新按钮的点击事件，点击之后更新select的option列表
$load=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="更新">angular和angularjs
</div>
<div>
官⽅⽂档说这两种⽅式都可以实现下拉列表，也说了⼀些ngOptions优于ngRepeat的点。但是没看到说会引起这个原因，root cause还是不知道。总之，以后⽤ngOptions吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。