AngularJS 선택 상자에서 기본 옵션을 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

AngularJS 선택 상자에서 기본 옵션을 설정하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-11-25 06:00:14

원래의

305명이 탐색했습니다.

How to Set the Default Option in an AngularJS Select Box?

AngularJS 선택 상자에 기본 옵션 설정

AngularJS에서는 다양한 방법을 사용하여 선택 상자를 기본 옵션으로 쉽게 초기화할 수 있습니다. 다양한 접근 방식으로 이를 달성하는 방법을 살펴보겠습니다.

ng-init 사용

이것은 기본 옵션을 설정하는 간단한 방법입니다. 선택 상자에 ng-init 지시어를 추가하고 모델 속성에 원하는 기본값을 할당하기만 하면 됩니다. 예:

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options">
</select>

로그인 후 복사

변경 감지 사용

이 방법은 AngularJS의 변경 감지 메커니즘을 활용합니다. 모델 속성에 시계를 설정하고 처음에 정의되지 않은 경우 기본값을 수동으로 설정하면 원하는 결과를 얻을 수 있습니다.

<select ng-model="somethingHere" ng-options="option.name for option in options">
</select>

<div ng-controller="MyCtrl">
  $scope.$watch('somethingHere', function(newVal) {
    if (!newVal) {
      $scope.somethingHere = options[0];
    }
  });
</div>

로그인 후 복사

ng-if 사용

ng-if를 사용하면 모델 값에 따라 선택된 옵션을 조건부로 렌더링할 수 있습니다. 속성:

<select ng-model="somethingHere" ng-options="option.name for option in options">
  <option value="0" ng-if="!somethingHere">Something Cool</option>
  <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>

로그인 후 복사

ng-selected 지시어 사용

이 지시어를 사용하면 true로 평가될 때 옵션이 선택되도록 하는 조건을 지정할 수 있습니다. 다음과 같이 사용할 수 있습니다.

<select ng-model="somethingHere" ng-options="option.name for option in options">
  <option value="0" ng-selected="!somethingHere">Something Cool</option>
  <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>

로그인 후 복사

필요에 가장 적합한 방법을 선택하고 AngularJS 선택 상자에서 기본 옵션을 설정하는 편리함을 누려보세요.

위 내용은 AngularJS 선택 상자에서 기본 옵션을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!