angularjs笔记
  • Introduction
  • 依赖注入
  • 作用域
  • 数据绑定
    • 控制器->模板->控制器->模板
  • 多个控制器
  • $scope对象
    • $apply方法、$digest方法
    • $watch方法
    • 示例:购物车
  • 模块和控制器
  • $provide对象的provider、factory、service方法
    • 多个控制器内共享数据
  • 过滤器(Filters)
    • number、currency、date
    • limitTo、lowercase、uppercase
    • filter、orderBy、json
    • 示例:产品列表
    • 自定义过滤器
  • 控制器(controller)
    • 显式和隐式依赖注入
  • 指令
    • Angular 内置指令
    • Angular 自定义指令
      • restrict、template、replace属性
      • templateUrl属性
      • transclude、priority、terminal属性
      • compile && link属性
      • controller && controllAs属性
      • require属性
      • scope属性
  • Module里其他方法
    • constant、value、run方法
  • Form表单
    • 示例:注册页
  • XHR和服务器端的通信
    • $http
  • JavaScript基础
    • .isFunction是否为函数
  • 资料链接
  • 功能组件
    • Tooltip
    • CSV
  • 其他
    • $watchCollection
    • $controller 继承
    • 两个对象合并
    • 页面关闭
    • AngularJs 时间格式化处理
    • 数据的本地存储
    • 页面的URL
Powered by GitBook
On this page

Was this helpful?

  1. $scope对象

示例:购物车

Previous$watch方法Next模块和控制器

Last updated 6 years ago

Was this helpful?

cart.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
    <script type="text/javascript" src="app/cart.js"></script>
</head>
<body ng-app="cartApp">

    <div ng-controller="cartController" class="container">
        <table class="table" ng-show="cart.length">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名字</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in cart">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" ng-click="reduce(item.id)" class="btn tn-primary">-</button>
                        <input type="text" value="{{item.quantity}}" ng-model="item.quantity" >
                        <button type="button" ng-click="add(item.id)" class="btn tn-primary">+</button>
                    </td>
                    <td>{{item.price}}</td>
                    <td>{{item.price * item.quantity}}</td>
                    <td>
                        <button type="button" ng-click="remove(item.id)" class="btn btn-danger">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        总购买价
                    </td>
                    <td>
                        {{totalPrice()}}
                    </td>
                    <td>
                        总购买数量
                    </td>
                    <td>
                        {{totalQuantity()}}
                    </td>
                    <td colspan="2">
                        <button type="button" ng-click="cart = {}" class="btn btn-danger">清空购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <p ng-show="!cart.length">您的购物车为空</p>
    </div>
</body>
</html>

app/cart.js

var app = angular.module('cartApp', []);

app.controller('cartController', function($scope){

    $scope.cart = [
        {
            id: 1000,
            name: 'iphone5s',
            quantity: 3,
            price: 4300
        },
        {
            id: 3300,
            name: 'iphone5',
            quantity: 30,
            price: 3300
        },
        {
            id: 232,
            name: 'imac',
            quantity: 4,
            price: 23000
        },
        {
            id: 1400,
            name: 'ipad',
            quantity: 5,
            price: 6900
        }
    ];


    /**
     * 计算购物总价
     */
    $scope.totalPrice = function () {
        var total = 0;
        angular.forEach($scope.cart, function (item) {
            total += item.quantity * item.price;
        })
        return total;
    }

    /**
     * 计算总购买数
     */
    $scope.totalQuantity = function () {
        var total = 0;
        angular.forEach($scope.cart, function (item) {
            total += parseInt(item.quantity);
        })
        return total;
    }


    /**
     * 找一个元素的索引
     */
    var findIndex = function (id) {
        var index = -1;

        angular.forEach($scope.cart, function (item, key) {
            if (item.id === id) {
                index = key;
                return;
            }
        });

        return index;
    }


    /**
     * 为某个产品添加一个数量
     */
    $scope.add = function (id) {
        var index = findIndex(id);

        if (index !== -1) {
            ++$scope.cart[index].quantity;
        }
    }


    /**
     * 为某个产品减少一个数量
     */
    $scope.reduce = function (id) {
        var index = findIndex(id);

        if (index !== -1) {
            var item = $scope.cart[index];
            if(item.quantity > 1){
                --item.quantity;
            }else{
                var returnKey = confirm('是否从购物车内删除该产品!');
                if(returnKey){
                    $scope.remove(id);
                }
            }
        }
    }

    /**
     * 移除一项
     */
    $scope.remove = function (id) {
        var index = findIndex(id);
        // 如果找到了那个item
        if (index !== -1) {
            $scope.cart.splice(index, 1);
        }

        // 自动做脏检查
    }

    // 监听数量 如果小于 1 则让用户判断是否要删除产品
    $scope.$watch('cart',function(newValue,oldValue){
        angular.forEach(newValue,function(item,key){
            if(item.quantity < 1){
                var returnKey = confirm('是否从购物车内删除该产品!');
                if(returnKey){
                    $scope.remove(item.id);
                }else{
                    item.quantity = oldValue[key].quantity;
                }
            }
        })
    },true);
});