테스트 사이트 - 개발 중인 베타 버전입니다

선택 상자

· 8년 전 · 1429
선택 상자

ng-model 지시문 을 사용하여 응용 프로그램에 선택 상자를 바인딩하십시오 .

속성에 정의 된 ng-model속성은 선택 상자에서 선택한 옵션의 값을 갖습니다.


선택한 옵션의 값에 따라 텍스트를 표시하십시오.

<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>

myVar에의 값이 될 것이다 dogs, tuts또는 cars.


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>

<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>

<p>The ng-switch directive hides and shows HTML sections depending on the value of the dropdown list.</p>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1451
부트스트랩 Disabled Item
1450
부트스트랩 활성 상태
1449
1448
1447
1446
1445
부트스트랩 Bootstrap Pager
1444
부트스트랩 Breadcrumbs
1443
부트스트랩 Pagination Sizing
1442
1441
1440
1438
1437
1436
1435
부트스트랩 컬러 진행 바
1434
1433
1432
부트스트랩 레이블
1431
1430
1429
1428
1427
1426
부트스트랩 세로 단추 그룹
1425
부트스트랩 버튼 그룹
1424
1421
부트스트랩 블록 레벨 버튼
1420
부트스트랩 단추 크기 1
1419