您的位置：首页 > Web前端 > AngularJS

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

2017-01-16 23:40 316 查看
刚才学习了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);
}
}

}]);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs
相关文章推荐
新的分享
章节导航