zoukankan      html  css  js  c++  java
  • angular笔记_2

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="hd" ng-controller="ctrl">
    名称:<input type="text" ng-model="good.title" readonly="readonly" /><br/>
    单价:<input type="text" ng-model="good.price" readonly="readonly" /><br/>
    数量:<input type="text" ng-model="good.num" /><br/>
    总价:<input type="text" ng-value="good.num * good.price"/>
    <br/><br/><br/>
    商品名称:{{goods.data.title}}<br/>
    商品价格:{{goods.data.price}}<br/>
    商品数量:{{goods.data.num}}<br/>
    商品总价:{{goods.data.num * goods.data.price}}<br/>
    <button ng-click="goods.add()" >增加</button>
    <button ng-click="goods.reduce()" >减少</button>
    <br/><br/><br/>
    <form action="1.php" method="post">
    <input type="text" ng-model="name" name="name" />
    <input type="submit" value="提交"/>
    </form>
    </div>
    <script>
    var m=angular.module('hd',[]);
    m.controller('ctrl',['$scope',function($scope){
    $scope.name="数据提交";
    $scope.good={'title':'oppo','price':300,num:2};
    $scope.add=function(){
    $scope.good.num=Math.min(++$scope.good.num,6);
    //$scope.goods.num=6?6:++$scope.goods.num

    }
    $scope.reduce=function(){
    $scope.good.num=Math.max(--$scope.good.num,0); //
    }

    //整理成对象
    $scope.goods={
    data:{'title':'apple','price':3000,num:0},
    add:function(){
    $scope.goods.data.num=Math.min(++$scope.goods.data.num,6);
    },
    reduce:function(){
    $scope.goods.data.num=Math.max(--$scope.goods.data.num,0); //
    }
    };

    }]);
    </script>

    </body>
    </html>

  • 相关阅读:
    Java实现 LeetCode 136 只出现一次的数字
    Java实现 LeetCode 136 只出现一次的数字
    Java实现 LeetCode 136 只出现一次的数字
    Java实现 LeetCode 135 分发糖果
    Java实现 LeetCode 135 分发糖果
    Java实现 LeetCode 135 分发糖果
    Java实现 LeetCode 134 加油站
    Java实现 LeetCode 134 加油站
    Java实现 LeetCode 134 加油站
    Java实现 LeetCode 133 克隆图
  • 原文地址:https://www.cnblogs.com/yewook/p/8067635.html
Copyright © 2011-2022 走看看