2014年12月1日 星期一
angularJS 簡單sample
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script type="text/javascript" src="js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/angularJS/angular.js"></script>
<script language="JavaScript" type="text/javascript">
function fruitControl($scope) {
$scope.fruitModel = [{id:1,fruitName:'apple',fruitPrice:5},
{id:2,fruitName:'banana',fruitPrice:10},
{id:3,fruitName:'orange',fruitPrice:8},
{id:4,fruitName:'peach',fruitPrice:20}];
$scope.fruitList = $scope.fruitModel[0];
$scope.discount = 1;
}
</script>
</head>
<body>
<span ng-controller="fruitControl">
水果：<select ng-model="fruitList" ng-options="fruit.fruitName for fruit in fruitModel"></select>
折扣：<input type="radio" ng-model="discount" value="0.25"/>25折
<input type="radio" ng-model="discount" value="0.5"/>5折
<input type="radio" ng-model="discount" value="0.75"/>75折
<div ng-switch on="fruitList.fruitName">
<div ng-switch-when="apple">apple is {{fruitList.fruitPrice * discount}} dollars.</div>
<div ng-switch-when="banana">banana is {{fruitList.fruitPrice * discount}} dollars.</div>
<div ng-switch-when="orange">orange is {{fruitList.fruitPrice * discount}} dollars.</div>
<div ng-switch-when="peach">peach is {{fruitList.fruitPrice * discount}} dollars.</div>
</div>
</span>
</body>
</html>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言