Jak tłumić typ zmiennej w atrybucie wartości za pomocą opcji-ng?

Question

Uruchamianie AngularJS 1.4.0-rc.1 wartość wewnątrz pętli ng-options zawiera typ zmiennej.

Zobacz następujący kod:

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

To generuje kod HTML, który wygląda tak:

<select ng-options="option.id as option.label for option in options" ng-model="option" class="ng-pristine ng-valid ng-touched"> 
    <option value="?" selected="selected"></option> 
    <option value="number:1" label="Item 1">Item 1</option> 
    <option value="number:2" label="Item 2">Item 2</option> 
    <option value="number:3" label="Item 3">Item 3</option> 
</select> 

Dlaczego wartość poprzedzona przez typ zmiennej, tj. number:? W poprzednich wersjach AngularJS (np. Bieżący stabilny 1.3.15) atrybuty value są wypełnione oczekiwanymi wartościami 1, 2 i 3.

Czy to błąd w wersji 1.4.0-rc.1, czy te przypadki muszą być teraz obsługiwane inaczej?

Answer 1

Oczywiście nastąpiła zmiana w sposobie obsługi dyrektywy ngOptions. Ta zmiana jest krótko wyjaśniona w migration notes for AngularJS 1.4. Bardziej szczegółowy opis zmian można znaleźć w commit message:

Podczas korzystania ngOptions: dyrektywa ma zastosowanie klucza zastępczego jako wartość elementu <option>. To zatwierdzenie zmienia rzeczywisty ciąg używany jako klucz zastępczy. Przechowujemy teraz ciąg znaków, który jest obliczany przez , wywołując hashKey na pozycji w zbiorze opcji; poprzednio to było indeksem lub kluczem pozycji w kolekcji.

(Jest to zgodne ze sposobem, że nieznana wartość opcji wynosi reprezentowane w wybranej dyrektywy.)

Przed może widzieliście:

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

Teraz to będzie coś jak:

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

Jeśli Applica kod powoływał się na tę wartość, której nie powinien, , wówczas będziesz musiał zmodyfikować swoją aplikację, aby to uwzględnić.Użytkownik może stwierdzić, że można użyć wartości track by o wartości ngOptions, ponieważ zapewnia ona możliwość określenia przechowywanego klucza.

Oznacza to, że musisz teraz użyć track by, aby uzyskać taki sam wynik jak poprzednio. Aby rozwiązać ten przykład w pytaniu to musi wyglądać tak wtedy:

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

Answer 2

Patrz: migration guide, aby uzyskać trochę niejasne wyjaśnienie tej zmiany, pod nagłówkiem ngOptions.

Ze względu na 7fda214c, gdy ngOptions renderuje wartości opcji w ramach DOM, otrzymany kod HTML jest inny. Zwykle nie powinno to wpłynąć na twoją aplikację, jednak jeśli Twój kod opiera się na sprawdzaniu właściwości wartości elementów (które generuje ngOptions ), upewnij się, że jest to read the details.