angularjs中对表格数据进行增删改查操作详细

AngularJS 中对表格数据进行操作

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。

AngularJS 学习起来非常简单。

好了,现在说说AngularJS 中怎么对表格中的数据进行增删改查操作的;

我写了个小案例:

head(头部详细操作如下)

    
     
     
      
      
    

    <script type="text/javascript" src="angular.js" ></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.products = [{
                id:80,
                name:"iphone",
                price:5400
            },{
                id:150,
                name:"ipad mini",
                price:2200
            },{
                id:120,
                name:"ipad air",
                price:2340
            },{
                id:160,
                name:"ipad",
                price:1420
            },{
                id:130,
                name:"imac",
                price:15400
            }];

            $scope.sortFlag = "-";
            $scope.sortName = "name";
            //定义排序功能
            $scope.sortProducts = function(clomnName){
                $scope.sortName = clomnName;
                if($scope.sortFlag == "-"){
                    $scope.sortFlag = "";
                }else{
                    $scope.sortFlag = "-";
                }
            }

            //删除指定商品
            $scope.deleteProduct = function(name){
                //alert(name);
                //var i = -1;
                for(index in $scope.products){
                    if($scope.products[index].name == name){
                        //i = index;
                        $scope.products.splice(index,1);
                    }
                }
            }
            //全部删除
            $scope.deleteAll = function(){
                $scope.products = null;
            }
        });
    </script>

看完以上的head部分,应该大概知道body里该做什么了吧,关键body里面都是一些布局,

可以供些参考,不用死布局,以下为body

     
     
      
      
    
      
      
       
       
商品列表
    
      
      
       
       
    
      
      
       
       全部删除
      
      
       
       

      
      
       
       

    
      
      
       
       

        
        

         
         

          
          
产品编号
          
          
产品名称
          
          
产品价格
          
          
功能
         
         
        
        
        
        

         
         

          
          
{ 
           {goods.id}}
          
          
{ 
           {goods.name}}
          
          
{ 
           {goods.price}}
          
          
删除
         
         
        
        
       
       

     
     
      
      

这就是本章所有内容,今天到此为止,谢谢观看,对您有帮助请记得留下你的大拇指