ng-options를 사용하여 값 내의 변수 유형을 억제하려면 어떻게 해야 합니까?
AngularJS 1.4.0~rc.1의 실행:ng-options
loop에는 변수의 유형이 포함됩니다.
다음 코드를 참조하십시오.
<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>
그러면 다음과 같은 HTML 코드가 생성됩니다.
<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>
값 앞에 변수 유형이 붙는 이유는 무엇입니까?number:
? 이전 버전의 AngularJS(예: 현재 안정적인 1.3.15)에서는value
Atribute는 예상되는 값으로 채워집니다.1
,2
그리고.3
.
1.4.0-rc.1의 버그입니까?아니면 지금 다른 대응을 해야 하나요?
분명히 어떻게 변했는지에 변화가 있었다.ngOptions
디렉티브가 처리됩니다.이 변경은 AngularJS 1.4의 이행노트에 간략하게 설명되어 있습니다.변경에 대한 자세한 설명은 커밋메시지를 참조해 주세요.
사용시
ngOptions
: 디렉티브는 surgary key를 값으로서 적용합니다.<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
의 특징.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>
ngOptions 제목 아래에 있는 이 변경에 대한 모호한 설명은 마이그레이션 가이드를 참조하십시오.
7fda214c로 인해 ngOptions가 DOM 내에서 옵션 값을 렌더링할 때 생성되는 HTML 코드는 다릅니다.통상, 이것은 애플리케이션에 전혀 영향을 주지 않습니다만, 코드의 요소(ngOptions가 생성하는 요소)의 값 속성 검사에 의존하고 있는 경우는, 반드시 상세를 읽어 주세요.
언급URL : https://stackoverflow.com/questions/30120230/how-to-suppress-variable-type-within-value-attribute-using-ng-options
'source' 카테고리의 다른 글
가치가 존재하지 않는 경우에만 어레이에 lodash push를 사용합니까? (0) | 2023.03.25 |
---|---|
MUI에서 원색 및 보조 색상 변경 (0) | 2023.03.25 |
페이지를 새로고침하면 AngularJS HTML5 모드에서 잘못된 GET 요구가 발생한다. (0) | 2023.03.25 |
AngularJS: HTTP 인터셉터에 서비스 주입(순환 의존성) (0) | 2023.03.25 |
angular ui-router: 해결 중인 toState의 $state 정보를 가져옵니다. (0) | 2023.03.25 |