增删改查专项练习(一)












    <select name="" ng-model="orderkey">
        <option value="">--按要求排序--</option>
        <option value="sells">销量正序</option>
        <option value="-sells">销量倒序</option>
        <option value="price">价格正序</option>
        <option value="-price">价格倒序</option>
    </select>   
    <input type="button" id="" value="批量删除"  ng-click="delMore()" />
    <input type="button" id="" value="清空数据"  ng-click="clearmenu()" />
    </div>
    <table border="1" cellspacing="0" cellpadding="1">
        <tr><th><input type="checkbox" id="" value="" ng-model="all" /></th>
            <th>菜单</th>
            <th>菜系</th>
            <th>售价</th>
            <th>月销量</th>
            <th>点菜操作</th>
            <th>菜单操作</th>
            <th>小计</th>
        </tr>
        <tr ng-repeat="x in menus|filter:{name:searKey,price:searprice}|orderBy:orderkey">
            <td><input type="checkbox" id="" value="{{x.id}}"  ng-model="all" /></td>
            <td>{{x.name}}</td>
            <td>{{x.type[0]+","+x.type[1]}}</td>
            <td>{{x.price}}</td>
            <td>{{x.sells}}</td>
            <td>
                <input type="button" id="" value="-"  ng-click="reduce(x.id)"/>
                <!--<input type="button" id="" value="-"  ng-click="x.number++"/>-->    
                {{x.number}}
                <input type="button" id="" value="+"  ng-click="increase(x.id)"/>

            </td>
            <td>
                <!--<input type="button" id="" value="下单" ng-click="ordermenu(x.id)"/>-->
                <input type="button" id="" value="下单" ng-click="x.sells=x.sells+x.number"/>

                <input type="button" id="" value="撤销" ng-click="revmenu(x.id)"/>
            </td>
            <td>{{x.price*x.number}}</td>
        </tr>
    </table>
    <div>
        <p>总消费:{{getTotal()}}</p>
    </div>


    <script type="text/javascript">
        var app=angular.module("myapp",[]);

        app.controller("myctrl",function($scope,$http){

            //从网络上获取数据
            $http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest")
            .then(function(response){

// console.log(response);
$scope.menus=response.data;
});

            $scope.clearmenu=function(){
                $scope.menus=[];
            }

            //下单操作
            $scope.ordermenu=function(id){
                for (var i = 0; i < $scope.menus.length; i++) {
                    if($scope.menus[i].id==id){
                        //销量增加
                        $scope.menus[i].sells+=$scope.menus[i].number;
                        break;
                    }
                }

            }
            //撤销操作
            $scope.revmenu=function(id){
                if(confirm("确定撤销吗?")){
                    for (var i = 0; i < $scope.menus.length; i++) {
                    if($scope.menus[i].id==id){
                        //销量减少
                        $scope.menus[i].sells-=$scope.menus[i].number;
                        //清空数量
                        $scope.menus[i].number=0;
                        break;
                    }
                    }
                }

            }

            //数量加加 根据id去查询数量,然后再改变它的number值
            $scope.increase=function(id){
                for (var i = 0; i < $scope.menus.length; i++) {
                    if($scope.menus[i].id==id){
                        $scope.menus[i].number++;
                        break;
                    }
                }

            }
            //数量的相
            $scope.reduce=function(id){
                for (var i = 0; i < $scope.menus.length; i++) {
                    if($scope.menus[i].id==id){
                        if($scope.menus[i].number==0){
                            alert("不能再减少了。");
                        }else{
                            $scope.menus[i].number--;
                        }
                        break;
                    }
                }

            }

            $scope.getTotal=function(){
                var total=0;
                for (var i = 0; i < $scope.menus.length; i++) {
                    total+=($scope.menus[i].price*$scope.menus[i].number);
                }
                return total;
            }

            $scope.delMore=function(){
                //得到选中的checkbox
                var cbs=$("input:checked");
                if(cbs.length==0){
                    alert("请选择。");
                }else{
                    var result=confirm("确定删除吗?");
                    if(result){
                        cbs.each(function(){
                                for (var i = 0; i < $scope.menus.length; i++) {
                                    if($(this).val()==$scope.menus[i].id){
                                        $scope.menus.splice(i,1);//删除
                                        break;
                                    }
                                }
                        });
                     alert("删除成功");
                    }else{
                        alert("删除失败");
                    }

                }
                }

        });

    </script>

</body>

猜你喜欢

转载自blog.csdn.net/LG_lxb/article/details/81258528