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

선택 상자

· 8년 전 · 1425
선택 상자

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>

댓글 작성

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

로그인하기

게시글 목록

번호 제목
1386
1385
AngularJS 주형
1384
AngularJS 컨트롤러
1383
1382
1381
1380
1379
1378
1377
1376
1375
1374
1373
1372
1371
1370
AngularJS AngularJS API
1369
AngularJS 검증 예제
1368
1367
AngularJS CSS 클래스
1366
1365
AngularJS 이메일
1364
1363
1362
1361
AngularJS 체크 박스
1360
1359
AngularJS $event 객체
1358
1357