source

ng-options를 사용하여 값 내의 변수 유형을 억제하려면 어떻게 해야 합니까?

nicesource 2023. 3. 25. 11:29
반응형

ng-options를 사용하여 값 내의 변수 유형을 억제하려면 어떻게 해야 합니까?

AngularJS 1.4.0~rc.1의 실행:ng-optionsloop에는 변수의 유형이 포함됩니다.

다음 코드를 참조하십시오.

<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)에서는valueAtribute는 예상되는 값으로 채워집니다.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

반응형