1. 程式人生 > >AngularJS消費 小計

AngularJS消費 小計









    <div>
    <input type="text" name="" id="" value="" placeholder="根據選單名稱模糊查詢..."  ng-model="searKey" />
    <input type="text" name="" id="" value="" placeholder="根據價格模糊查詢..."  ng-model="searprice" />

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