Angular（ng表單指令操作）
阿新 • • 發佈：2017-05-30
rep class itl lock als 表達 tro [] pri
html部分
.................................................
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular（ng表單指令操作）</title>
<script src="js/angular-1.3.0.js"></script>
<script src="js/t9.js"></script>
<style>
.rect {display:inline-block;height:48px;width:100px;}
</style>
</head>
<body ng-controller="MyCtrl">
<!--ng-checkbox ng-true-value="YES" ng-false-value="NO"-->
<!-- ng-checked 指令用於設置復選框(checkbox)或單選按鈕(radio)的 checked 屬性-->
<!--如果 ng-checked 屬性返回 true，復選框(checkbox)或單選按鈕(radio)將會被選中-->
<input type="checkbox" ng-model="cbValue" ng-true-value="YES" ng-false-value="NO"><br>
{{cbValue}}<br>
<!--ng-radio ng-checked 指令用於設置復選框(checkbox)或單選按鈕(radio)的 checked 屬性-->
<input type="radio" ng-model="cameraName" value="Canon">Canon<br>
<input type="radio" ng-model="cameraName" value="Nikon">Nickon<br>
<!--select ng-options 使用數組元素填充下拉列表 -->
選擇你喜歡的相機:{{cameraName}} <hr>
<select ng-model="camera" ng-options="c.model group by c.make for c in cameras">
</select>
{{camera|json}}
<hr>
<label ng-repeat="color in colors">
{{color}}
<input type="radio" ng-model="myStyle[‘background-color‘]" ng-value="color" id="{{color}}">
</label>
<span class="rect" ng-style="myStyle" ></span>
<hr>
<!--ng-if 取消選中，並移除內容-->
<!--ng-checked 指令用於設置復選框(checkbox)或單選按鈕(radio)的 checked 屬性-->
<!--ng-style 指令為 HTML 元素添加 style 屬性。-->
<!--ng-style 屬性值必須是對象，表達式返回的也是對象。-->
<!--對象由 CSS 屬性和值組成，即 key=>value 對。-->
是否顯示msg:
<input type="checkbox" ng-model="checked" >
<p ng-if="checked" ng-bind="msg"></p>
<p>表達式</p>
<p>{{msg}}</p>
<hr>
驗證$digest循環
<b>{{msg}}</b>
</body>
</html>
.................................................
js部分
var myApp=angular.module(‘myApp‘,[]);
myApp.controller(‘MyCtrl‘,function ($scope) {
$scope.cbValue=‘YES‘;
$scope.cameras=[
{make:‘Canon‘,model:‘700‘,price:4000},
{make:‘Canon‘,model:‘800‘,price:9000},
{make:‘Nikon‘,model:‘D7000‘,price:3800},
{make:‘Nikon‘,model:‘D7770‘,price:10000}
];
$scope.colors=[‘red‘,‘green‘,‘blue‘];
$scope.myStyle={‘background-color‘:‘blue‘};
$scope.msg=‘this is a test‘;
});
Angular（ng表單指令操作）