Подтвердить что ты не робот

Как подавить тип переменной в атрибуте value с помощью ng-options?

Запуск AngularJS 1.4.0-rc.1 значение в цикле ng-options содержит тип переменной.

Смотрите следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js">
</script>
<script>
  angular.module("selectOptionsTest", []).
    controller("SelectOptionsController", ["$scope", function($scope) {
      $scope.options = [
        {id: 1, label: "Item 1"},
        {id: 2, label: "Item 2"},
        {id: 3, label: "Item 3"}
      ];
    }]);
</script>
<div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
  <select ng-model="opt" ng-options="option.id as option.label for option in options">
  </select>
</div>
4b9b3361

Ответ 1

Очевидно, произошло изменение в директиве ngOptions. Это краткое описание объяснено в примечаниях миграции для AngularJS 1.4. Более подробное описание изменений можно найти в сообщении commit:

При использовании ngOptions: директива применяет суррогатный ключ как значение элемента <option>. Эта фиксация изменяет фактическую строку используется как суррогатный ключ. Теперь мы сохраняем строку, которая вычисляется по формуле вызов hashKey элемента в коллекции опций; ранее это был индекс или ключ элемента в коллекции.

(Это соответствует тому, что неизвестное значение параметра представленный в директиве select.)

Прежде чем вы могли видеть:

<select ng-model="x" ng-option="i in items"> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> <option value="4">d</option> </select>

Теперь это будет что-то вроде:

<select ng-model="x" ng-option="i in items"> <option value="string:a">a</option> <option value="string:b">b</option> <option value="string:c">c</option> <option value="string:d">d</option> </select>

Если ваш код приложения основывался на этом значении, которого он не должен, то вам нужно будет изменить свое приложение, чтобы оно соответствовало этому. Вы может обнаружить, что вы можете использовать track by feaure ngOptions, поскольку это предоставляет возможность указывать сохраненный ключ.

Это означает, что теперь вам нужно использовать track by для получения того же результата, что и раньше. Чтобы исправить пример в вопросе, он должен выглядеть так:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js">
</script>
<script>
  angular.module("selectOptionsTest", []).
    controller("SelectOptionsController", ["$scope", function($scope) {
      $scope.options = [
        {id: 1, label: "Item 1"},
        {id: 2, label: "Item 2"},
        {id: 3, label: "Item 3"}
      ];
    }]);
</script>
<div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
  <select ng-model="opt" ng-options="option.id as option.label for option in options track by option.id">
  </select>
</div>

Ответ 2

См. руководство по миграции для неясного объяснения этого взломанного изменения под заголовком ngOptions.

Из-за 7fda214c, когда ngOptions отображает значения параметров в пределах DOM, полученный HTML-код отличается. Обычно это не должно однако, если ваш код зависит от вашего приложения, проверка свойства свойства элементов (что ngOptions генерирует), то обязательно прочитать сведения.