Список выбора со списком анализа 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, который является рекомендуемым способом в 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>

PS

Я предполагаю ! в вашем коде по ошибке, если нет, вы не можете сделать это преобразование в HTML. Вам лучше иметь другой массив с отформатированными результатами и смотреть исходный массив, чтобы обновить преобразование.

Answer 2

Использование 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>