AngularJs学习记录-(2) ng-click

最新推荐文章于 2020-10-14 15:45:43 发布

%3F%3F%B7

最新推荐文章于 2020-10-14 15:45:43 发布

阅读量5.9k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/bf287643910/article/details/54578531

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

刚才学习了AngularJS的ng-click；通过一个小案例，发现AngularJS框架的方便之处;

ng-click是用来告诉AngularJS当他所在的元素被点击时出发某个函数ng-click=‘fun()’；

AngularJS只会在$scope中寻找你要运行的函数，并不会去搜索全局函数；

<body ng-app="hd">
    <div ng-controller="ctrl">

        <!--
        ng-click='fun()';在该元素被点击时，运行已经定义好的fun();
        -->
        商品名称：{{goods.data.title}}<br/>
        商品价格：{{goods.data.price}}元<br/>
        库存：{{goods.data.kucun}}件<br/>
        购买数量：{{goods.data.num}}件<br/>
        总计：{{goods.data.num*goods.data.price}}元;<br/>
        <button ng-click="goods.add()">增加</button>
        <button ng-click="goods.reduce()">减少</button>
        <!--当你触发click这个方法是，angular会直接去$scope内去寻找与click相对应的方法，并不会调用
        全局变量，所以方法一定要写在$scope中-->

    </div>

<script>
   var m =  angular.module('hd',[]);
   m.controller('ctrl',['$scope',function ($scope) {
       $scope.add=function () {				//定义ng-click触发的函数add();
            if($scope.goods.num<$scope.goods.kucun){
                $scope.goods.num++;
            }
       };
       $scope.reduce=function () {			//定义ng-click触发的函数reduce();
           if($scope.goods.num>0){
               $scope.goods.num--;
           } 
       };
       $scope.goods = {'title':'apple macboox','price':8000,'num':0,'kucun':5};//这就是被调用的内容
   }]);
   </script>

其实还有一种比较简便的写法

var m = angular.module('hd',[]);
m.controller('ctrl',['$scope',function ($scope) {
    $scope.goods={				//封装$scope.goods
        data:{'title':'apple macboox','price':8000,'num':0,'kucun':5},	//仿JSON实例
        add:function () {
            $scope.goods.data.num=Math.min(++$scope.goods.data.num,$scope.goods.data.kucun);
        },
        reduce:function () {
            $scope.goods.data.num=Math.max(--$scope.goods.data.num,0);
        }
    }

}]);