ng-options를 사용하여 AngularJS에서 동적 드롭다운 목록을 어떻게 생성합니까?
- Linda Hamilton원래의
- 2024-11-09 00:54:02981검색
AngularJS의 ng-options를 사용하여 Select 작업
AngularJS에서 ng-options 지시문을 사용하면
배열에서 옵션 생성
배열에서 옵션을 생성하려면 다음 구문을 사용하세요.
<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 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 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.