step1:准备json数据文件:
文件目录为:data/data.json (这里只是个demo,所以json文件中的只准备了几组样本数据)
[{"price":12.56,"count":10},{"price":20.67,"count":5},{"price":10,"count":1},{"price":49,"count":3} ]@H_502_4@step2:准备html文件
文件目录为:demo.html<div ng-controller="myCtrl"> <!--此处创建名为myCtrl的控制器,在html的头标签中调用ng-app=“myApp”启动模块--> <table> <thead> <tr> <th>NO.</th> <th>price</th> <th>count</th> <th>total</th> <th>doSomething</th> </tr> </thead> <tbody> <tr ng-repeat="tmp in List track by $index"> <td>{{$index+1}}</td> <td>{{tmp.price | currency}}</td><!--此处因为涉及到价格,所以使用了currency过滤器--> <td>{{tmp.count}}</td> <td>{{tmp.price*tmp.count | currency}}</td> <td> <button ng-click="deleteOne($index)">Delete</button> <button ng-click="addCount($index)">AddCount</button> </td> </tr> </tbody> </table> <!--此处做了一个附加功能,从页面获取数据,同步添加到table表格中--> <form action="#"> price:<input type="text" ng-model="price"/> count:<input type="text" ng-model="count"/> <button ng-click="getData()">AddData</button> </form> </div>@H_502_4@step3:添加css样式
干净美观的页面效果,能让人赏心悦目,也方便查看页面数据,所以即使是demo,我也添加了一些css样式。
css样式和简短,所以直接写在了html中.<style> table{ border-collapse: collapse; text-align: center; } th,td{ border:2px solid #ddd; width:100px; } td:last-child{ width:200px; } button{ line-height: 25px; } form{ margin-top: 20px; } input{ width:100px;height:30px; line-height: 30px; } </style>@H_502_4@//创建模块 var app = angular.module("myApp",["ng"]); //自定义服务 app.factory("$cart",function(){ return{ add:function(k){ k++; return k; },// 增加count 如果想做减少的话,可同理再增加一个方法 做减法即可 getD:function(obj,data){ obj.push(data); },//获得数据 remove:function(arr,n){ arr.splice(n,1); }//删除条目 } }); //此处添加$http头部信息,为向PHP传递页面数据准备--添加条目 app.run(["$http",function($http){ $http.defaults.headers.post={ "Content-Type":"application/x-www-form-urlencoded" } }]); //创建控制器 app.controller("myCtrl",["$scope","$http","$httpParamSerializerJQLike","$injector",function ($scope,$http,$httpParamSerializerJQLike,$injector) { if($injector.has('$cart')){ var cartObj = $injector.get('$cart'); //读取json文件 $http.get("data/data.json") .success(function(data){ angular.forEach(data,function(){ $scope.List = data; }) }); //添加数量 $scope.addCount=function(n){ $scope.List[n].count=cartObj.add($scope.List[n].count); }; //删除条目 $scope.deleteOne=function(n){ cartObj.remove($scope.List,n); }; //添加条目 post $scope.price=""; $scope.count=""; $scope.getData=function(){ var result=$httpParamSerializerJQLike({"price":$scope.price,"count":$scope.count}); $http.post("data/shoppingcart.PHP",result) .success(function(data){ cartObj.getD($scope.List,data); $scope.price=""; $scope.count=""; }); }; }else{ throw new Error("service is not defined") } }]);@H_502_4@以上基本实现了添加删除的效果,自己做着玩增加的从页面获取数据同步添加到页面表格需要用到的PHP文件如下:
<?PHP header("content-type:application/json;charset=utf-8"); @$price=$_REQUEST["price"]; @$count=$_REQUEST["count"]; $str = ["price"=>"$price","count"=>$count]; echo json_encode($str); ?>@H_502_4@注:第一次在sf上记录代码,挺好玩.By 北九 : )