AngularJS - 在选择标签中使用显式 ng-repeat 添加了额外的空白选项答案

【问题标题】：AngularJS - extra blank option added using explicit ng-repeat in select tagAngularJS - 在选择标签中使用显式 ng-repeat 添加了额外的空白选项
【发布时间】：2014-04-30 05:34:21
【问题描述】：

我有一个使用ng-repeat 而不是ng-options 创建的select 列表。我遇到的问题是，一旦用户更改值，就会有一个额外的空白列表项消失。

AngularJS - extra blank option added using ng-repeat in select tag 的答案提到应初始化所选项目以避免该问题。我做到了，但我仍然有一个空白条目。

HTML：

<select ng-model="selectedLanguage">
  <option ng-repeat="language in languages" value="{{language}}" ng-selected="selectedLanguage == language">{{language.name}}</option>
</select>
<h2>{{selectedLanguage}}</h2>

控制器：

app.controller('Ctrl', function($scope) {
  $scope.languages = [{ name: "English", key: 'en' }, { name: "French", key: 'fr'}];
  $scope.selectedLanguage = $scope.languages[0];
});

Plunker

【问题讨论】：

标签： angularjs

【解决方案1】：

你应该使用 ng-options 我更新了你的 plunkr

http://plnkr.co/edit/Iz7wFfG9l6wmQ50w2RpP

HTML

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.2.1" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <select ng-model="selectedLanguage" ng-options="language.name | uppercase for language in languages">
    </select>
    <h2>{{selectedLanguage}}</h2>
  </body>

</html>

JS（无变化）

// Code goes here

var app = angular.module("app", []);

app.controller('Ctrl', function($scope) {
  $scope.languages = [{ name: "English", key: 'en' }, { name: "French", key: 'fr'}];
  $scope.selectedLanguage = $scope.languages[0];
});

【讨论】：

我的option 文本实际上使用了一个过滤器：<option>{{language.name | translate}}</option>，所以我认为我不能用ng-options 做到这一点。我可以吗？
相信你仍然可以使用 ng-options 中的过滤器stackoverflow.com/questions/16644402/… 我试过它似乎可以工作plnkr.co/edit/Iz7wFfG9l6wmQ50w2RpP
很高兴这成功了，我也不知道关于 ng-options 的事情，但是在进行角度选择时对我来说总是很困难，所以我尽量让它尽可能简单。跨度>