<!DOCTYPE html>
<html>
<head>
<title>ng-if And ng-switch</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../w3-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<!--ng-if จะ removes HTML element ถ้า expression = false
และจะ add HTML element ถ้า expression = true -->
<h1 align="center">จงติ๊ก
<input type="checkbox"
ng-model="statusCheckbox"
ng-init="statusCheckbox = false" />
</h1>
<h1 align="center" ng-if="statusCheckbox" >สวัสดีชาวโลก</h1>
<!-- ng-switch จะ โช HTML elements ตาม expression ที่เลือก -->
<h1 align="center">
ศัพท์ภาษาอังกฤษ
<select ng-model="statusSelect">
<option value="rat">หนู</option>
<option value="cat">แมว</option>
<option value="dog">หมา</option>
</select>
</h1>
<h1 align="center">
<div ng-switch="statusSelect">
<div ng-switch-when="rat">
<h1>Rat</h1>
</div>
<div ng-switch-when="cat">
<h1>Cat</h1>
</div>
<div ng-switch-when="dog">
<h1>Dog</h1>
</div>
<div ng-switch-default="">
<h1>แปลภาษา</h1>
</div>
</div>
</h1>
</div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น