angular学习笔记（2）

最新推荐文章于 2023-06-21 17:02:39 发布

五年丶

最新推荐文章于 2023-06-21 17:02:39 发布

阅读量246

点赞数

分类专栏：学习笔记文章标签： angular

本文链接：https://blog.csdn.net/dengboz0910/article/details/53021884

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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;
}

五年丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular学习笔记（2）

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="c
复制链接

扫一扫