我是学web前端的，为了跟的上技术潮流，最近开始学习了angular；这个是需要一定的js基础才可以学习的。ng-app:是为了定义模块；
ng-controller:是设置控制器
scope：视图模型
下面这段代码是学习跟着敲的，关键的地方也做了注释
<div ng-app="hd" ng-controller="ctrl"><!--视图-->
<h2 ng-bind="name"></h2>
<h1>{{name}}</h1>
<input type="text" ng-model="name">
</div>
<script>
var m=angular.module('hd',[]);//声明一个模块
//双向数据绑定
m.controller('ctrl',['$scope',function($scope){
//viewmodle
$scope.name="ww";
}])
</script>
用angular实现基本的购物车里的加减
<body ng-app="hd">
<div ng-controller="ctrl">
商品名称：{{goods.title}};<br/>
商品价格：{{goods.price}};<br/>
购买数量：{{goods.num}};<br/>
总额：{{goods.price*goods.num}}<br/>
<button ng-click="add()">增加</button>
<button ng-click="reduce()">减少</button>
</div>
<script>
var m=angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.goods={'title':'apple','price':300,'num':0};
$scope.add=function(){
$scope.goods.num=Math.min(++ $scope.goods.num,6);
};
$scope.reduce=function(){
$scope.goods.num=Math.max(-- $scope.goods.num,0);
};
}])
</script>
</body>另外一种方法
<body ng-app="hd">
<div ng-controller="ctrl">
商品名称：{{goods.data.title}};<br/>
商品价格：{{goods.data.price}};<br/>
购买数量：{{goods.data.num}};<br/>
总额：{{goods.data.price*goods.data.num}}<br/>
<button ng-click="goods.data.add()">增加</button>
<button ng-click="goods.data.reduce()">减少</button>
</div>
<script>
var m=angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.goods={
data:{'title':'apple','price':300,'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>
2436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
