#ng-value可以填寫表達式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src='js/angular.min.js'> </script>
<style type="text/css">
.ng-cloak{display:none;}
</style>
</head>
<body ng-app="hd" ng-cloak class="ng-cloak">
<div ng-controller="ctrl">
商品名稱：<input type="text" ng-model="goods.name" /><br />
商品價格：<input type="text" ng-model="goods.price" /><br />
商品數量：<input type="text" ng-model="goods.num" /><br />
商品總價：<input type='text' ng-value="goods.price*goods.num" readonly="readonly"/><br />
</div>
<script type="text/javascript">
var m=angular.module('hd',[])
m.controller('ctrl',['$scope',function($scope){
$scope.goods={'name':'iphone','price':3000,'num':0}
}])
</script>
</body>
</html>#ng-show關聯單選框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src='js/angular.min.js'> </script>
<style type="text/css">
.ng-cloak{display:none;}
</style>
</head>
<body ng-app="hd" ng-cloak class="ng-cloak">
<div ng-controller="ctrl">
顯示 <input type="radio" ng-model="status" ng-value="1" /><br />
關閉 <input type="radio" ng-model="status" ng-value=""/><br />
`status`
<text ng-show="status==1">正在維護中...</text>
</div>
<script type="text/javascript">
var m=angular.module('hd',[])
m.controller('ctrl',['$scope',function($scope){
$scope.status=1
}])
</script>
</body>
</html>#複選框checkbox, 控制選中的值：ng-true-value="1" ng-false-value="0"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src='js/angular.min.js'> </script>
<style type="text/css">
.ng-cloak{display:none;}
</style>
</head>
<body ng-app="hd" ng-cloak class="ng-cloak">
<div ng-controller="ctrl">
遊戲 <input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0" /><br />
電影 <input type="checkbox" ng-model="data.movie" ng-true-value="1" ng-false-value="0" /><br />
`data`.`game`
<textarea ng-show="data.game==1">dota2</textarea>
<textarea ng-show="data.movie">戰狼2</textarea>
</div>
<script type="text/javascript">
var m=angular.module('hd',[])
m.controller('ctrl',['$scope',function($scope){
$scope.data={'game':0,'movie':0}
}])
</script>
</body>
</html>#下拉列表select，ng-options
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<select ng-options="v.value as v.name for v in data" ng-model="hobby">
<option value="">請選擇hobby</option>
</select>
`hobby`
</div>
<script type="text/javascript">
var m=angular.module('app',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.hobby='iphone'
$scope.data=[
{name:'game',value:'dota2'},
{name:'movie',value:'戰狼2'},
{name:'phone',value:'iphone'}
]
}]);
</script>
</body>
</html>
