ng-options를 사용하여 AngularJS에서 동적 드롭다운 목록을 어떻게 생성합니까?

AngularJS의 ng-options를 사용하여 Select 작업

AngularJS에서 ng-options 지시문을 사용하면 <option> <select> 배열 또는 객체 데이터 소스를 기반으로 합니다. 범위 변수에 바인딩할 수 있는 드롭다운 목록을 생성하는 간단한 방법을 제공합니다.

배열에서 옵션 생성

배열에서 옵션을 생성하려면 다음 구문을 사용하세요.

<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">

여기서:

• selectedValue는 선택한 옵션에 바인딩될 모델 변수입니다.
• items는 옵션에 대한 데이터가 포함된 배열입니다
• item.value는 옵션 요소의 value 속성에 사용되는 값입니다
• item.label은 옵션 요소에 표시되는 텍스트입니다

예

다음 AngularJS 컨트롤러를 고려하세요.

$scope.items = [
  {id: '000001', title: 'Chicago'},
  {id: '000002', title: 'New York'},
  {id: '000003', title: 'Washington'}
];

이 데이터를 <select> 각 항목의 제목 및 ID 값에 해당하는 옵션에는 다음 코드를 사용하세요.

<select ng-model="selectedItem" ng-options="item.id as item.title for item in items">

기본 옵션 선택

기본적으로 특정 옵션을 선택하려면 ng-init 지시어를 사용하세요.

<select ng-model="selectedItem" ng-init="selectedItem = items[1]" ng-options="item.id as item.title for item in items">

기본 옵션 사용자 정의

사용자 정의 <옵션> <select> 값 속성이 비어 있으면 사용자 정의 기본 옵션을 생성할 수 있습니다.

<select ng-model="selectedItem">
  <option value="">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

선택 후 기본 옵션 숨기기

선택 후 사용자 정의 기본 옵션을 숨기려면 ng-를 사용하세요. 숨기기:

<select ng-model="selectedItem">
  <option value="" ng-hide="selectedItem">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

위 내용은 ng-options를 사용하여 AngularJS에서 동적 드롭다운 목록을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!