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

前端之家收集整理的这篇文章主要介绍了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}
   ]@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@ 

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")
    }
}]);@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 北九 : )

猜你在找的Angularjs相关文章