商品管理系统_增删改查过滤.


<html>
    <head>
        <meta charset="UTF-8">
        <title>商品管理系统title>

        <script src="lib/js/ionic.bundle.min.js">script>
        <style>
            table tr{
                border: 1px solid;
            }
            body{
                width: 800px;
                margin: 0 auto;
            }
            table tr:nth-child(2n){
                background-color: #CCCCCA;
            }
        style>
        <script>
            angular.module("myapp",[])
            .controller("demoC",function($scope){
                //新增区域默认不显示
                $scope.showadd=false;



                $scope.title="state";
                $scope.desc=false;  //默认false升  true降

                //数组
                $scope.goods=[];
                for(var i=1;i<5;i++){
                    var g={
                        "checked":false,   //复选是否被选中
                        "id":i,
                        "gname":"云南白药"+i,
                        "address":"云南",
                        "state":"发货",
                        "regDate":new Date(),
                         "price":100+i
                    };
                    var g2={
                        "checked":true,
                        "id":10+i,
                        "gname":"云南白药"+i,
                        "address":"云南",
                        "state":"已发货",
                        "regDate":new Date("2016-"+i+"-1 3:01:02"),
                         "price":100+i
                    };
                    $scope.goods.push(g);

                    $scope.goods.push(g2);
                }

                //全选操作
                $scope.ckAll=function(){
                    var ck=$scope.isck;// 表头中的复选框
                    for(var i=0;i<$scope.goods.length;i++){
                        $scope.goods[i].checked=ck;
                    }
                }

                $scope.delAll=function(){
                    var b=false; //默认么有选中的
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checked==true){
                            b=true;
                            break;
                        }
                    }
                    console.log("是否有选择",b);
                    //执行删除操作
                    if(b==true){
                        for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checked==true){
                            $scope.goods.splice(i,1);
                            i--;  //删除后,下次依然从当前索引开始
                        }
                    }   
                    }else{
                        alert("请选择后操作");
                    }
                }
                //批量发货
                $scope.fhAll=function(){
                    var b=false; //默认么有选中的
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checked==true){
                            b=true;
                            break;
                        }
                    }
                    console.log("是否有选择",b);
                    //执行删除操作
                    if(b==true){
                        for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checked==true){
                            $scope.goods[i].state="已发货";
                        }
                    }   
                    }else{
                        alert("请选择后操作");
                    }


                }

                //单个删除
                $scope.del=function(g){  //当前删除行的对象
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].id==g.id){   //查找当前删除的对象在数组中的索引
                            $scope.goods.splice(i,1);  //
                        }
                    }
                }

                $scope.savegood=function(){
                    $scope.tips=false;  //控制错误信息是否显示
                    $scope.valArr=[];
                    //商品名  地址   价格
                    if($scope.gname==undefined||$scope.gname==""){
                        $scope.valArr.push("用户名不能为空");
                    }else if(!($scope.gname.length>2 && $scope.gname.length<10)){
                        $scope.valArr.push("用户名长度在2到10");
                    }

                    if($scope.address==undefined || $scope.address==""){
                        $scope.valArr.push("地址不能为空");
                    }

                    //数字   /^\d+$/
                    if(! /^\d+$/.test($scope.price)){

                        $scope.valArr.push("价格必须为有效数字");
                    }

                    if($scope.valArr.length>0){
                        $scope.tips=true;
                    }else{
                        var g2={
                        "checked":false,
                        "id":100,
                        "gname":$scope.gname,
                        "address":$scope.address,
                        "price":$scope.price,
                        "state":"发货",
                        "regDate":new Date()
                        };
                        //添加到数组
                        $scope.goods.push(g2);
                        $scope.showadd=false;
                    }

                }

                $scope.orderby=function(){
                    //获取输入框内容
                    var t=$scope.ordertype;
                    if(t=="1"){
                        $scope.title='price';
                        $scope.desc=false;
                    }else if(t=="2"){
                        $scope.title='price';
                        $scope.desc=true;
                    }else if(t=="3"){
                        $scope.title='regDate';
                        $scope.desc=false;
                    }else if(t=="4"){
                        $scope.title='regDate';
                        $scope.desc=true;
                    }

                }

            })

        script>
    head>
    <body ng-app="myapp" ng-controller="demoC">
        <button ng-click="showadd=true">新增button>
        <button ng-click="delAll()">批量删除button>
        <button ng-click="fhAll()">批量发货button>
        <input ng-model="selname" placeholder="根据商品名字查询" autofocus />
        <input ng-model="seladdress" placeholder="根据商品生成地查询" />
        <select ng-model="ordertype" ng-change="orderby()">
            <option value="">请选择排序方式option>
            <option value="1">商品价格升序option>
            <option value="2">商品价格降序option>
            <option value="3">生产日期升序option>
            <option value="4">生产日期降序option>

        select>

        <table border="1px">
            <tr style="background-color: #787876;">
                <td><input type="checkbox" ng-model="isck" ng-change="ckAll()" />td>
                <td ng-click="title='gname';desc=!desc">商品名称td>
                <td ng-click="title='address';desc=!desc">商品产地td>
                <td ng-click="title='price';desc=!desc">商品价格td>
                <td ng-click="title='regDate';desc=!desc">生产日期td>
                <td>状态td>
                <td>操作td>
            tr>

            <tr style="border: 1px;" ng-repeat="good in goods|orderBy:title:desc|filter:{'gname':selname,'address':seladdress}">
                <td><input type="checkbox" ng-model="good.checked" /> td>
                <td>
                <span ng-hide="good.edit">{{good.gname}} span>    
                <span ng-show="good.edit==true"> <input ng-model="good.gname" />  span>   
                td>
                <td>{{good.address}}td>
                <td>{{good.price}}td>
               <td>{{good.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}td>
               <td>
               <span ng-show="good.state=='已发货'">   
                {{good.state}}
               span>
               <span ng-show="good.state=='发货'">    
                <a href="#" ng-click="good.state='已发货'">
                {{good.state}}
                a>
               span>
               td>
               <td>

                <button ng-click="del(good)">删除button> | 
                     
                    <button ng-hide="good.edit" ng-click="good.edit=true">修改button>
                    <button ng-show="good.edit==true" ng-click="good.edit=false">保存button>
               td>

            tr>
        table>
        <div ng-show="showadd">
            <form>
                商品名:<input ng-model="gname" /><br />
                生产地:<input ng-model="address" /><br />
                价格 : <input ng-model="price" /><br />
                <div style="width: 200px; background-color: pink;">
                    <ul>
                        
                        <li ng-repeat="c in valArr ">{{c}}li>                     
                    ul>
                div>


                <button ng-click="savegood()" >保存button>


            form>

        div>
    body>
html>

你可能感兴趣的:(商品管理系统_增删改查过滤.)