Angularjs增删改查例子

最新推荐文章于 2018-12-30 16:00:00 发布
Future_Master_L
最新推荐文章于 2018-12-30 16:00:00 发布
阅读量576
点赞数
这里写图片描述
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    </head>

    <body ng-app="Mapp" ng-controller="Mctrl">
        管理信息:<br />
        <button ng-click="btn_deleteall()">批量删除</button> 用户名
        <input type="text" ng-keydown="select_name($event)" ng-model="selname" />
        <select ng-model="select_order" ng-init="select_order='年龄正序'" ng-change="select_orderchange()">
            <option>年龄正序</option>
            <option>年龄倒序</option>
        </select>
        <button ng-click="btn_add()">添加</button><br />
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th><input type="checkbox" ng-model="selectall1" ng-click="selectall()" /></th>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
                <th>录入日期</th>
                <th>操作</th>
            </tr>
            <tr ng-repeat="i in items">
                <td><input type="checkbox" class="click" ng-click="click($index)" /></td>
                <td>{{i.name}}</td>
                <td>{{i.age}}</td>
                <td>{{i.city}}</td>
                <td>{{i.date1|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                <td><button ng-click="btn_update($index)">修改</button><button ng-click="btn_delete($index)">删除</button></td>
            </tr>
        </table>
        <fieldset style="width: 300px;" ng-show="fieldset_add">
            <legend>用户信息</legend>
            姓名<input type="text" id="" value="" ng-model="add_name" /><br /> 年龄
            <input type="text" id="" value="" ng-model="add_age" /><br /> 城市
            <input type="text" id="" value="" ng-model="add_city" /><br />
            <button ng-click="OK_click1()">OK</button>
        </fieldset>
        <fieldset style="width: 300px;" ng-show="fieldset_update">
            <legend>修改信息</legend>
            姓名<input type="text" id="" value="" ng-model="add_name2" /><br /> 年龄
            <input type="text" id="" value="" ng-model="add_age2" /><br /> 城市
            <input type="text" id="" value="" ng-model="add_city2" /><br />
            <button ng-click="OK_click2()">OK</button>
        </fieldset>
        <script>
            angular.module("Mapp", [])
                .controller("Mctrl", function($scope) {
                    var arr = [{
                        name: "张三",
                        age: "20",
                        city: "北京",
                        date1: new Date().getTime(),
                        isChecked: false,
                    }, {
                        name: "张四",
                        age: "25",
                        city: "上海",
                        date1: new Date().getTime(),
                        isChecked: false,
                    }, {
                        name: "张五",
                        age: "22",
                        city: "广州",
                        date1: new Date().getTime(),
                        isChecked: false,
                    }];
                    $scope.items = arr;
                    $scope.items.sort(function(a, b) {
                        return a.age - b.age;
                    })
                    //批量删除
                    $scope.btn_deleteall = function() {
                        for(var i = arr.length - 1; i >= 0; i--) {
                            if(arr[i].isChecked) {
                                arr.splice(i, 1)
                            }
                        }
                    }
                    //排序
                    $scope.select_orderchange = function() {
                        if($scope.select_order == "年龄正序") {
                            $scope.items.sort(function(a, b) {
                                return a.age - b.age;
                            })

                        } else if($scope.select_order == "年龄倒序") {
                            $scope.items.sort(function(a, b) {
                                return b.age - a.age;
                            })

                        }
                    }
                    //用户名模糊查询
                    $scope.select_name = function($event) {
                        var keycode = $event.keyCode;
                        var arrtemp = [];
                        if(keycode == 13) {
                            for(var i = 0; i < arr.length; i++) {
                                if(arr[i].name.indexOf($scope.selname) != -1) {
                                    arrtemp.push(arr[i])
                                }
                            }
                            $scope.items = arrtemp;
                        }
                    }
                    //全选
                    $scope.selectall = function() {
                        for(var i = 0; i < arr.length; i++) {
                            arr[i].isChecked = $scope.selectall1;
                            $(".click")[i].checked = $scope.selectall1;
                        }

                    }
                    //单选
                    $scope.click = function($index) {
                        arr[$index].isChecked = $(".click")[$index].checked
                    }
                    var flag2 = false;
                    //点击添加
                    $scope.btn_add = function() {
                        flag2 = !flag2;
                        $scope.fieldset_add = flag2;
                    }
                    var flag1 = false;
                    //位置变量
                    var OK_click2id = 0;
                    //修改
                    $scope.btn_update = function($index) {
                        flag1 = !flag1;
                        $scope.fieldset_update = flag1;
                        //点击修改-位置变量-提升作用域
                        OK_click2id = $index;
                        //获取点击修改的信息
                        var f_name = arr[$index].name;
                        var f_age = arr[$index].age;
                        var f_city = arr[$index].city;
                        //回显
                        $scope.add_name2 = f_name;
                        $scope.add_age2 = f_age;
                        $scope.add_city2 = f_city;
                    }
                    //店家OK保存添加信息
                    $scope.OK_click1 = function() {
                        var add_name = $scope.add_name;
                        var add_age = $scope.add_age;
                        var add_city = $scope.add_city;
                        arr.push({
                            name: add_name,
                            age: add_age,
                            city: add_city,
                            date1: new Date().getTime(),
                            isChecked: false,
                        })
                        $scope.items = arr;
                    }
                    //点击OK修改信息
                    $scope.OK_click2 = function() {
                        var add_name = $scope.add_name2;
                        var add_age = $scope.add_age2;
                        var add_city = $scope.add_city2;
                        arr.splice(OK_click2id, 1, {
                            name: add_name,
                            age: add_age,
                            city: add_city,
                            date1: new Date().getTime(),
                            isChecked: false,
                        })
                        $scope.items = arr;
                    }
                    //删除
                    $scope.btn_delete = function($index) {
                        arr.splice($index, 1)
                    }
                })
        </script>
    </body>

</html>