angularJs购物车列表

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            /*鼠标变小手*/
            button{cursor: pointer;}

            table tr:nth-child(2n){
                background-color: bisque;
            }

            #ss{width: 40px; text-align: center;}
            table{border: 2px solid red; width: 1000px;
                    text-align: center;
                 }
            tr,td{border: 1px solid black; }
        </style>
        <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="js/angular.min.js" ></script>
    </head>
    <body ng-controller="myCtrl">

        <input type="text" placeholder="请输入关键词" ng-model="chaxun"  />
        <input type="button" value="查询" ng-click="cxun()" />
        <input type="button" value="添加" ng-click="tianjia()" />
        <button ng-click="delSelect()" >批量删除</button>
        排序：<select ng-model="selorder">
            <option value="prices">数量正序</option>
            <option value="-prices">数量倒序</option>
        </select>



        <table cellspacing="0px">
            <tr>
                <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
                <td>产品编号</td>
                <td>产品名称</td>
                <td>购买数量</td>
                <td>产品单价</td>
                <td>产品总价</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="x in datas | filter:chaxun | orderBy:selorder ">
                <td><input type="checkbox" ng-model="x.state"/></td>
                <td>{{x.id}}</td>
                <td>{{x.name}}</td>
                <td>
                    <button ng-click="jian($index)">-</button>
                        <input id="ss" type="text" ng-model="x.nums" />
                    <button ng-click="jia($index)">+</button>
                </td>
                <td>{{x.prices}}</td>
                <td>{{x.prices*x.nums}}</td>
                <td>
                    <button ng-click="remove($index)">删除</button>
                    <button ng-click="xiugai($index)">修改</button>
                </td>
            </tr>
        </table>

        <div>
            <h3>总价：</h3><h3>{{zongjia()}}</h3>
            <h3>总数：</h3><h3>{{zongshu()}}</h3>
            <button ng-click="removeAll()">清空购物车</button>
        </div>
        <!--添加页面-->
        <fieldset style="margin-top: 20px;" ng-show="sos" >
            <legend>新增商品：</legend>
            产品编号
            <input type="text" ng-model="id_1" required/>
            <span id="sp1"></span>
            <br/>   产品名称
            <input type="text" ng-model="name_1" required/>
            <span id="sp2"></span>
            <br/> 购买数量
            <input type="number" ng-model="nums_1" required/>
            <span id="sp3"></span>
            <br/> 产品单价
            <input type="text" ng-model="prices_1" required/>
            <span id="sp4"></span>
            <br/>
            <input type="button" value="保存" ng-click="bz()" />
        </fieldset>
        <!--修改页面-->
        <fieldset style="margin-top: 20px;"  ng-show="lol">
            <legend>修改商品信息：</legend>
            产品编号
            <input type="text" ng-model="id_2" required/>
            <span id="sp1_1"></span>
            <br/>   产品名称
            <input type="text" ng-model="name_2" required/>
            <span id="sp2_1"></span>
            <br/> 购买数量
            <input type="number" ng-model="nums_2" required/>
            <span id="sp3_1"></span>
            <br/> 产品单价
            <input type="text" ng-model="prices_2" required/>
            <span id="sp4_1"></span>
            <br/>
            <input type="button" value="确认修改" ng-click="bz2()" />
        </fieldset>

        <script>
            var idx = -1 ;
            var app = angular.module("myApp",[]);

            app.controller("myCtrl",function($scope){
//              自定义数据
                $scope.datas=[{
                    id:1001,
                    name:"xiaomi6",
                    nums:1,
                    prices:3888,
                    state: false
                },{
                    id:1002,
                    name:"iphone7",
                    nums:1,
                    prices:5888,
                    state: false
                },{
                    id:1003,
                    name:"htc7",
                    nums:1,
                    prices:4888,
                    state: false
                },{
                    id:1004,
                    name:"oppo5",
                    nums:1,
                    prices:3888,
                    state: false
                },{
                    id:1005,
                    name:"vivo7",
                    nums:1,
                    prices:4300,
                    state: false
                }
                ];


                $scope.jian = function(index){

                    if($scope.datas[index].nums>1){
                        $scope.datas[index].nums--;
                    }else{
                        alert("数量不能为负数");
                    }

                }


                $scope.jia = function(index){
                    $scope.datas[index].nums++;
                }


//              全选和反选
                $scope.selectAllFun = function(){

                    if($scope.selectAll){
                        for (var x = 0 ; x<$scope.datas.length; x++) {
                            $scope.datas[x].state = true;
                        }
                    }else{

                        for (var x = 0 ; x<$scope.datas.length; x++) {
                            $scope.datas[x].state = false;
                        }



                    }

                }


//              批量删除
                $scope.delSelect = function(){
                    var arrs = [];
                    for (var x = 0 ; x<$scope.datas.length; x++) {
                        if($scope.datas[x].state){
                            arrs.push($scope.datas[x].name);
                        }
                    }

                    if(arrs.length<=0){
                        alert("请选择要删除的数据");
                    }else{

                        for (var x = 0 ; x<arrs.length; x++) {

                            for (var xx = 0; xx<$scope.datas.length; xx++) {

                                if(arrs[x]==$scope.datas[xx].name){
                                    $scope.datas.splice(xx,1);
                                }

                            }

                        }

                    }


                }



//              删除
                $scope.remove = function(index){
                    if(confirm("删除吗？")){
                        $scope.datas.splice(index,1);
                    }
                }

//              总价
                $scope.zongjia = function(){
                    var zprice = 0;
                    for (var x = 0 ; x <$scope.datas.length; x++) {
                        zprice+=$scope.datas[x].nums*$scope.datas[x].prices;
                    }
                    return zprice;
                }
//              总数
                $scope.zongshu = function(){
                    var nums = 0;
                    for (var x = 0 ; x <$scope.datas.length; x++) {
                        nums+=$scope.datas[x].nums;
                    }
                    return nums;
                }


//              清空
                $scope.removeAll = function(){

                    $scope.datas=[];

                }

//              添加    显示添加表格
                $scope.tianjia = function(){
                    $scope.sos = true;
                }

//              修改   显示修改表格
                $scope.xiugai = function(index){
                    $scope.lol = true;

                    idx = index;

                        $scope.id_2 = $scope.datas[index].id;
                        $scope.name_2 = $scope.datas[index].name;
                        $scope.nums_2 = $scope.datas[index].nums;
                        $scope.prices_2 = $scope.datas[index].prices;

                }

//              查询
                $scope.cxun = function(){


                var zz = [];
                var cc = $scope.chaxun;

                for (var i = 0 ; i<$scope.datas.length; i++) {
                    if( $scope.datas[i].name.indexOf(cc)!=-1){
                        zz.push($scope.datas[i]);

                    }
                }
                $scope.datas=zz;

                }


//              添加
                $scope.bz = function(){


                    var i = $scope.id_1;
                    var n = $scope.name_1;
                    var u = $scope.nums_1;
                    var p = $scope.prices_1;



                    var flag = true;
                    if(i==null||i==""){
                        $("#sp1").html("不能为空");
                        flag=false;

                    }else{
                        $("#sp1").html("");
                        flag=true;
                    }


                    if(n==null||n==""){
                        $("#sp2").html("不能为空");
                        flag=false;

                    }else{
                        $("#sp2").html("");
                        flag=true;
                    }


                    if(u==null||u==""){
                        $("#sp3").html("不能为空");
                        flag=false;

                    }else{
                        $("#sp3").html("");
                        flag=true;
                    }


                    if(p==null||p==""){
                        $("#sp4").html("不能为空");
                        flag=false;

                    }else{
                        $("#sp4").html("");
                        flag=true;
                    }

                if(flag){

                    $scope.datas.push({
                        id:$scope.id_1,
                        name:$scope.name_1,
                        nums:$scope.nums_1,
                        prices:$scope.prices_1
                    });


                    $scope.id_1="";
                    $scope.name_1="";
                    $scope.nums_1="";
                    $scope.prices_1="";



                    $scope.sos = false;

                }   

                };

//              修改
                $scope.bz2 = function(){

                                $scope.datas[idx].id == $scope.id_2
                                $scope.datas[idx].name = $scope.name_2;
                                $scope.datas[idx].nums = $scope.nums_2;
                                $scope.datas[idx].prices = $scope.prices_2;

                                $scope.lol = false;

                }



            });

        </script>


    </body>
</html>

反选：

//全选/反选多选框的点击事件
                $scope.cb = function(){

                    if($scope.ck){//判断当点击全选框时
                        for(var i=0;i<$scope.datas.length;i++){
                            if($scope.datas[i].state){//当其他复选框为选中状态时
                                $scope.datas[i].state = false;//改为不选中状态
                            }else{//当其他复选框为不选中状态时
                                $scope.datas[i].state = true;//改为选中状态
                            }
                        }

                    }else{//判断当不点击全选框时
                        for(var i=0;i<$scope.datas.length;i++){
                            if($scope.datas[i].state){//当其他复选框为选中状态时
                                $scope.datas[i].state = false;//改为不选中状态
                            }else{//当其他复选框为不选中状态时
                                $scope.datas[i].state = true;//改为选中状态
                            }
                        }
                    }

                }

效果：