Picklist with 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>

我确实渲染了，但是生成的所有选项标签都在 select 标签之外。我是不是做错了什么？

编辑：使用 AngularJS 1.5.3

Answer 1

使用 ng-options 代替

文档：https://docs.angularjs.org/api/ng/directive/ngOptions

在此处为您示例 plnkr：https://plnkr.co/edit/tuKBJsxLxdUKcsRvWvax?p=preview

 <select ng-model="selectedValue" ng-options="item for item in years"></select>

Answer 2

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

您还需要 ng-model。您仍然可以使用自定义 "Empty/Select" 选项。

它看起来像这样：

<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>

P.S.

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

Picklist with Angular JS解析列表

Picklist with Angular JS parsing list

html

javascript

repeat

angularjs