angularJs实现增删改查demo

逻辑

//module
angular.module("myApp",[]).controller("demoC",function($scope){});
//模拟数据 只显示一条节约空间...
$scope.datas = [{
                state:false,
                id:7,
                goodsname:"OPPO R9sk",
                username:"关羽",
                tel:15777777777,
                price:4999,
                city:"北京",
                data:new Date("03-09 10:00"),
                status:"已发货"
            }];

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

敏感词汇 在往表格里添加时判断一下

for(var i = 0; i < $scope.datas.length; i++){				if($scope.datas[i].goodsname.indexOf("米") != -1){			$scope.datas[i].goodsname$scope.datas[i].goodsname.replace("米","*");
    }
}   

• 1
• 2
• 3
• 4

全选

$scope.ckAll = function(){
var v = $scope.ckall;
for(var i = 0; i < $scope.datas.length; i++){
     $scope.datas[i].state = v;
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

删除(批量删除/单行删除)

$scope.del = function(index){
    $scope.datas.splice(index,1);
}
$scope.delAll = function(){
    var plsc = [];
    for(var i = 0; i < $scope.datas.length; i++){
        if($scope.datas[i].state){
            $scope.datas.splice(i,1);
            plsc.push($scope.datas[i].state);
            i--;
        }
    }
    //如果没有选择 弹窗提示
    if(plsc.length == 0){
        alert("请选择要删除的数据");
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

全部发货

$scope.statusAll = function(){
    var plsc = [];
    for(var i = 0; i < $scope.datas.length; i++){
        if($scope.datas[i].state){
            if($scope.datas[i].status == "未发货"){
                plsc.push($scope.datas[i].status);
                    $scope.datas[i].status = "已发货"
            }else{
                plsc.push($scope.datas[i].status);
            }
        }
    }
    if(plsc.length == 0){
        alert("请选择要发货的数据");
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

月份查询

$scope.month = function(m){
    var v = m.getMonth() + 1;
    if ($scope.begin <= v && v <=$scope.finish) {
        return true;
    } else if($scope.begin == undefined || $scope.begin == "" || $scope.finish == undefined || $scope.finish == ""){
        return true;
    } else {
        return false;
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

添加

$scope.flag = false;
$scope.fl = false;
$scope.add = function(){
    $scope.pd = [];
    if($scope.newid == undefined || $scope.newid == ""){
        $scope.pd.push("ID不能为空");
    }
    if($scope.newgoodsname == undefined || $scope.newgoodsname == ""){
        $scope.pd.push("商品名不能为空");
    }
    if($scope.newusername == undefined || $scope.newusername == ""){
        $scope.pd.push("用户名不能为空");
    }
    if($scope.pd.length == 0){
        $scope.flag = false;
        $scope.datas.push({
        state:false,
        id:$scope.newid,
        goodsname:$scope.newgoodsname,
        username:$scope.newusername,
        tel:$scope.newtel,
        price:$scope.newprice,
        city:$scope.newcity,
        data:new Date(),
        status:"未发货"
    });
    //添加时再次判断敏感词
    for(var i = 0; i < $scope.datas.length; i++){
        if($scope.datas[i].goodsname.indexOf("米") != -1){
            $scope.datas[i].goodsname = $scope.datas[i].goodsname.replace("米","*");
        }
    }   
}else{
    alert("不能为空");
}       

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

style样式

        <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .box{
            width: 1000px;
            height: 600px;
            margin: 20px auto;
        }
        .box .ss{
            width: 140px;
            height: 20px;
            border-radius: 3px;
            border: 1px solid #c9c9c7;
            margin-bottom: 10px;
        }
        .box .xz{
            width: 138px;
            height: 21px;
            margin-bottom: 10px;
        }
        .box .an{
            width: 67px;
            height: 22px;
            background: #006d00;
            border-radius: 3px;
            border: 1px solid #165a21;
            color: #FFFFFF;
        }
        .box .bg{
            width: 100%;
            margin-top: 10px;
            text-align: center;
        }
        .box .bg tr th{
            background: #777775;
        }
        .box .bg tr:nth-child(2n) td{
            background: #eeeeee;
        }
        .box .fr input{
            margin-bottom: 10px;
        }
    </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47

布局

<body ng-app="myApp" ng-controller="demoC">
    <div class="box">
        <input type="text" placeholder="用户名搜索" class="ss" ng-model="usernamess" />
        <input type="tel" placeholder="手机号搜索" class="ss" ng-model="telss" />
        <select class="xz" ng-model="xzcity">
            <option value="">--请选择城市--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
            <option value="河南">河南</option>
        </select>
        <select class="xz" ng-model="xzstatus">
            <option value="">--请选择状态--</option>
            <option value="已发货">已发货</option>
            <option value="未发货">未发货</option>
        </select>
        <select class="xz" ng-model="begin">
            <option value="">开始月份</option>
            <option value="1">1月份</option>
            <option value="2">2月份</option>
            <option value="3">3月份</option>
            <option value="4">4月份</option>
            <option value="5">5月份</option>
            <option value="6">6月份</option>
            <option value="7">7月份</option>
            <option value="8">8月份</option>
            <option value="9">9月份</option>
            <option value="10">10月份</option>
            <option value="11">11月份</option>
            <option value="12">12月份</option>
        </select>
        <select class="xz" ng-model="finish">
            <option value="">结束月份</option>
            <option value="1">1月份</option>
            <option value="2">2月份</option>
            <option value="3">3月份</option>
            <option value="4">4月份</option>
            <option value="5">5月份</option>
            <option value="6">6月份</option>
            <option value="7">7月份</option>
            <option value="8">8月份</option>
            <option value="9">9月份</option>
            <option value="10">10月份</option>
            <option value="11">11月份</option>
            <option value="12">12月份</option>
        </select>
        <select class="xz" ng-model="px">
            <option value="">--请选择排序方式--</option>
            <option value="id">ID排序</option>
            <option value="price">价格排序</option>
            <option value="data">时间排序</option>
        </select>
        <input type="button" value="新增订单" class="an" ng-click="flag = !flag" />
        <input type="button" value="批量发货" class="an" ng-click="statusAll()" />
        <input type="button" value="批量删除" class="an" style="background: #e91600;" ng-click="delAll()" />
        <span style="font-size: 14px;">敏感字 : 米(商品名) -> 替换成 *</span>
        <table border="1" cellspacing="0" cellpadding="0" class="bg">
            <tr>
                <th><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></th>
                <th>ID</th>
                <th>商品名</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>价格</th>
                <th>城市</th>
                <th>下单时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr ng-repeat="b in datas | filter : {username : usernamess} | filter : {tel : telss} | filter : {city : xzcity} | filter : {status : xzstatus} | orderBy : px" ng-show="month(b.data)">
                <td><input type="checkbox" ng-model="b.state"></td>
                <td>{{b.id}}</td>
                <td>{{b.goodsname}}</td>
                <td>
                    <span ng-show="!fl">{{b.username}}</span>
                    <input type="text" ng-model="b.username" ng-show="fl" style="width: 80px; height: 20px;" />
                </td>
                <td>{{b.tel}}</td>
                <td>{{b.price | currency : "￥"}}</td>
                <td>{{b.city}}</td>
                <td>{{b.data | date : "MM-dd hh:mm"}}</td>
                <td>
                    <a href="" ng-show="b.status == '未发货'" ng-click="b.status = '已发货'">
                        发货
                    </a>
                    <span ng-show="b.status == '已发货'">{{b.status}}</span>
                </td>
                <td>
                    <a href="#" ng-click="fl=true" ng-show="!fl">修改</a>
                    <a href="#" ng-show="fl" ng-click="fl=false">保存</a>
                    <a href="#" ng-click="del($index)">删除</a>
                </td>
            </tr>
        </table>
        <form style="width: 240px; margin: 20px auto; border: 1px solid #000000; text-align: center; padding-top: 20px; padding-bottom: 10px" ng-show="flag" class="fr">
            <input type="text" placeholder="请输入id" ng-model="newid" />
            <input type="text" placeholder="请输入商品名" ng-model="newgoodsname" />
            <input type="text" placeholder="请输入用户名" ng-model="newusername" />
            <input type="text" placeholder="请输入手机号" ng-model="newtel" />
            <input type="text" placeholder="请输入价格" ng-model="newprice" />
            <input type="text" placeholder="请输入城市" ng-model="newcity" /><br />
            <input type="button" value="保存" ng-click="add()" />
        </form>
    </div>
</body>