javascript - 带有 Angular JS 解析列表的选项列表

Question

我有一个带有年份的字符串列表，例如:

$scope.years = ["2001", "2002", "2003", ...];

我试图将其呈现在 select 标记内的页面上，但 Angular 不断破坏代码，将元素呈现在标记之外。

我的页面中有以下内容:

<select>
    <option value="" disabled selected>----</option>
    <option ng-repeat="y in years" value="{!y!}">{!y!}</option>
</select>

我确实渲染了，但生成的所有选项标签都位于选择标签之外。我在这里做错了什么吗？

编辑:使用 AngularJS 1.5.3

Answer 1

您可以使用 ng-options，这是 AngularJS 中推荐的方式，在这种情况下，它比 ng-repeat 有很多性能改进。

它还要求您拥有ng-model。您仍然可以使用自定义的“清空/选择”选项。

它看起来像这样:

<select ng-model="something" name="S" 
        ng-options="y for y in years">
  <option value="" disabled selected>----</option>
</select>

完整的工作示例:

var app = angular.module("TestApp", []).controller("sample", ["$scope",
  function($scope) {
    $scope.years = ["2001", "2002", "2003"];
  }
]);

angular.bootstrap(document, ["TestApp"]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-controller="sample">
  <select ng-model="something" name="S" ng-options="y for y in years">
    <option value="" disabled selected>----</option>
  </select>
</div>

附注

我假设代码中的 ! 是错误的，如果不是，则无法在 HTML 中进行此转换。您最好拥有另一个包含格式化结果的数组，并观察原始数组以更新转换数组。