html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>混合多选</title>
<link rel="stylesheet" href="css/angular-csp.css"/>
<link rel="stylesheet" href="css/newIndex.css">
</head>
<body>
{{'第六个,通过修改ng-class文件的true or false(也就是通过修改键值对的value),进而修改样式'}}
<div ng-controller='sixth'>
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
{{'第七个,我们正在构建一个餐馆目录,我们希望高亮用户点击的那一行。'}}
<div>
<table ng-controller= 'seventh' >
<tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)'
ng-class='{selected: $index==selectedRow}' >
<td> {{restaurant.name}} </td>
<td> {{restaurant.cuisine}} </td>
</tr>
</table>
</div>
<br>
{{'第八个,如何正确使用$watch函数,其标准格式为:$watch(watchFn,watchAction,deepWatch),说简单一些,也就是,第一个参数是被监视的对象,第二个参数是当被监视的对象发生变化时,所执行的函数,第三个deepWatch,是布尔型,设置true or false如果设置成 true,Angular 将检查在被监视对象中每个属性'+
'的每次变化。'}}
<br>
{{'不使用deepWatch时'}}
<br>
{{'接下来,比如说我们希望当用户购物车中的总值超过 100$ 时给一个 10$ 的优惠。'}}
<div>
<div ng-controller="eighth" >
<h2>购物车</h2>
<div ng-repeat="item in items" > <!--以下内容一行显示-->
<span> {{item.title}} </span>
<input ng-model= "item.quantity" >
<span> {{item.price | currency}} </span>
<span> {{item.price * item.quantity | currency}} </span>
</div>
<div> Total: {{totalCart() | currency}} </div> <!--调用方法totalCart()得到商品总价格-->
<div> Discount: {{bill.discount | currency}} </div>
<div> Subtotal: {{subtotal() | currency}} </div>
</div>
</div>
<br>
{{'接上面第八例,现在接着说明使用deepWatch参数时候的写法'}}
<div>
<div ng-controller="ninth" >
<h2>购物车</h2>
<div ng-repeat="item in items" > <!--以下内容一行显示-->
<span> {{item.title}} </span>
<input ng-model= "item.quantity" >
<span> {{item.price | currency}} </span>
<span> {{item.price * item.quantity | currency}} </span>
</div>
<div> Total: {{total | currency}} </div> <!--调用方法totalCart()得到商品总价格-->
<div> Discount: {{discount | currency}} </div>
<div> Subtotal: {{subtotal | currency}} </div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/ctrl.js"></script>
</body>
</html>
js:
var app = angular.module('myApp',[]);
app.controller('sixth',function($scope){
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = 'Just a warning. Please carry on.';
$scope.isWarning = true;
$scope.isError = false;
};
});
app.controller('seventh',function($scope){
$scope.directory = [
{ name : 'The Handsome Heifer' , cuisine : 'BBQ' },
{ name : 'Green\' s Green Greens ', cuisine:' Salads '},
{ name:'House of Fine Fish ', cuisine:' Seafood ' }];
$scope . selectRestaurant = function (row) {
$scope . selectedRow = row;
};
});
app.controller('eighth',function($scope){
$scope . bill = {discount:0};
$scope . items = [
{title: 'Paint pots' , quantity : 8 , price : 3.95 },
{title: 'Polka dots' , quantity : 17 , price : 12.95 },
{title: 'Pebbles' , quantity : 5 , price : 6.95 }
];
$scope.totalCart = function() { //遍历购物车,算出商品总价
var total = 0 ;
for ( var i = 0 , len = $scope . items . length ; i < len ; i ++ ) {
total = total + $scope . items [ i ]. price * $scope . items [ i ]. quantity ;
}
return total ;
}
$scope.subtotal = function() {
return $scope.totalCart()-$scope.bill.discount ;
};
$scope . $watch ( $scope . totalCart , calculateDiscount ); <!--执行监视,此时deepWatch参数不在-->
function calculateDiscount( price ) {
$scope.bill.discount = price > 100 ? 10 : 0 ;
}
});
app.controller('ninth',function($scope){
$scope . items = [
{title: 'Paint pots' , quantity : 8 , price : 3.95 },
{title: 'Polka dots' , quantity : 17 , price : 12.95 },
{title: 'Pebbles' , quantity : 5 , price : 6.95 }
];
var calculateTotals = function () {
$scope.total = 0 ;
for ( var i = 0 , len = $scope . items . length ; i < len ; i ++ ) {
$scope.total = $scope.total + $scope . items [ i ]. price * $scope . items [ i ]. quantity ;
}
$scope.discount = $scope.total > 100 ? 10 : 0 ;
$scope.subtotal = $scope.total - $scope.discount ;
};
$scope . $watch ( $scope.items , calculateTotals , true );//deepWatch 设置为了 true ,则监视$scope.items里的每一个属性,当quantity发生变化,则执行calculateTotals();
});
css:
/*css样式中每个样式都能对其设置true or false*/
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
.selected {
background-color: lightgreen;
}