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

来源：互联网发布：淘宝大联盟编辑：程序博客网时间：2024/06/12 11:08

刚才学习了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);        }    }}]);

0 0