AngularJs用ng-click,ng-if等轻松实现购物车功能
如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！
AngularJs用ng-click,ng-if等轻松实现购物车功能
用angulajs里面的ng-model实现input的默认值，ng-click来实现点击，用ng-if来判断“购物车清单”是否需要显示，用ng-repeate来实现购物车里面的内容的循环输出。
HTML代码如下
<body ng-app="app">
<div ng-controller="FCtrl">
<h2>{{data2.msg}}</h2> <input type="text" ng-model="data2.shopcart['0']">
</div>
<div ng-controller="Shopping"> <input type="text" class="formcontrol" ng-model="goods"> <span class="input-group-btn">
<div class="button" ng-click="buy()">添加</div>
</span>
<h1 ng-if="shopcart.length>0">购物车清单</h1>
<ul class="list-group">
<li ng-repeat="item in shopcart track by $index">{{item}} <a ng-click="shopcart.splice($index,1)">删除</a></li>
</ul>
</div>
</body>Javascript代码如下:
angular.module("app", [])
.controller('FCtrl', function($scope, Data2) {
$scope.data2 = Data2;
}).controller('Shopping', function($scope, Data2) {
$scope.shopcart=Data2.shopcart;
$scope.buy=function(){
$scope.shopcart.push($scope.goods);
}
})- 分类：
- Web前端
更新时间：
上一篇：下一篇：
