AngularJS-01-实现添加和删除json格式数据（依赖注入，购物车雏形）

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}
   ]

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>    

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>  

step4:准备js文件
文件目录为:js/demo.js

//创建模块
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")
    }
}]);

以上基本实现了添加删除的效果,自己做着玩增加的从页面获取数据同步添加到页面表格需要用到的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);
?>

注:第一次在sf上记录代码,挺好玩.
By 北九 : )