zoukankan      html  css  js  c++  java
  • AngularJS尝鲜——增减商品购买量

    在写商城的时候,应该都会让顾客点击+或者-来选择购买商品的数量。

    效果图:

    这里写图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算商品总价,每件商品8元钱</title>
    </head>
    <script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
    <body>
    <h1>计算商品总价,每件商品8元钱</h1>
        <div ng-app="buy" ng-controller="con">
        <p>
            <button ng-click="decr()">-</button>
            <input type="text" ng-model="num" readonly="">
            <button ng-click="incr()">+</button>
        </p>
        <p>总价:{{num*8}}</p>
        </div>
    </body>
    <script>
        var app = angular.module('buy',[]);
        app.controller('con',function($scope){
            $scope.num = 1;//初始数量为1
            //增加
            $scope.incr = function(){
                this.num += 1;
            }
            //减少
            $scope.decr = function(){
                if(this.num > 1){
                    this.num -=1;
                }
            }
        });
    </script>
    </html>

    ng-model:AngularJS中的变量,自动获取文本框中的值
    ng-click:AngularJS中的点击事件

  • 相关阅读:
    Linux:mv命令
    Linux:cp -rp
    Linux:sed命令
    Linux:cut命令...未完待续
    Linux:xargs命令
    python动态获取对象的属性和方法 (转载)
    python 继承中的super
    HTTP认证机制(翻译)
    技术名词解释
    设计模式之代理模式
  • 原文地址:https://www.cnblogs.com/cnsec/p/13407011.html
Copyright © 2011-2022 走看看