Web前端
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’, Read more…