angularjs之增删改查2

最新推荐文章于 2019-03-01 22:20:01 发布
天生犯二
最新推荐文章于 2019-03-01 22:20:01 发布
阅读量202
点赞数
分类专栏： html/css
html/css 专栏收录该内容
11 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Angularjs的增删改查，排序，查询年龄范围</title>

    //需要导入angular.js库文件

    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript">
        //1.注入模块
        var app = angular.module("myapp", []);

        //2.定义一个数组(表单中显示的初始数据)
        var user = [{
            id: 1,
            name: "轩轩",
            age: 22,
            sex: "男"
            },
            {
                id: 2,
                name: "轩",
                age: 33,
                sex: "女"
            },
            {
                id: 3,
                name: "小轩",
                age: 44,
                sex: "男"
            },
            {
                id: 4,
                name: "大轩",
                age: 55,
                sex: "女"
            }
        ]
        //绑定控制器
        app.controller("myctr", function($scope) {
            $scope.users = user;
            //  $scope.ageSize = "";
            //年龄范围过滤
            $scope.ageTest = function(age, ageSize) {
                //alert(ageSize);
                //alert(age);
                if(ageSize != "--请选择--") {
                    var agess = ageSize.split("-");
                    var ageMin = agess[0];
                    var ageMax = agess[1];
                    if(age < ageMin || age > ageMax) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    return true;
                }
            }

            //全部删除
            $scope.remove = function(index) {
                if(confirm("是否全部删除")) {
                    $scope.users.splice(index);
                }
            }

            //单行删除
            //方式1根据下标删除一行信息
            /*$scope.del = function(index) {
             alert("确定要删除" + index + "吗");
             $scope.users.splice(index, 1);
             }*/
            //方式2根据名字删除一行
            $scope.del=function(name){

                if(confirm("是否删除"+name+"商品")){
                    var p;
                    for(index in $scope.users){
                        p=$scope.users[index];
                    }
                    if(p.name==name){
                        $scope.users.splice(index,1);
                    }
                }

            }

            //批量删除
            $scope.removes = function() {
                var userNames = [];
                for(index in $scope.users) {
                    if($scope.users[index].pi == true) {
                        userNames.push($scope.users[index].name);

                    }
                }
                if(userNames.length > 0) {
                    if(confirm("是否删除选中项")) {
                        for(i in userNames) {

                            var name = userNames[i];
                            for(i2 in $scope.users) {
                                if($scope.users[i2].name == name) {
                                    $scope.users.splice(i2, 1);
                                }
                            }
                        }
                    }
                } else {
                    alert("请删除选项");
                }
            }
            //添加信息
            $scope.name = "";
            $scope.age = "";
            $scope.sex = "";
            $scope.sub = function() {
                var newUser = {
                    id: $scope.users.length + 1,
                    name: $scope.name,
                    age: $scope.age,
                    sex: $scope.sex
                }
                $scope.users.push(newUser);
            }
            //修改用户信息
            $scope.name = name;
            $scope.names = "";
            $scope.ages = "";
            $scope.sexs = "";
            $scope.updates = function() {
                alert("修改信息");
                for(index in $scope.users) {
                    if($scope.users[index].name == $scope.names) {
                        $scope.users[index].age = $scope.ages;
                        $scope.users[index].sex = $scope.sexs;
                    }
                }
            }

            //根据标题排序

            $scope.bold = "bold";
            $scope.title = 'name';
            $scope.desc = 0;
            $scope.ss = '';

            $scope.dian=function(tit){
                $scope.title=tit;
                $scope.desc=!$scope.desc;
            }

        })
    </script>
</head>
<center>

    <body ng-app="myapp" ng-controller="myctr">
    <h1>信息表</h1>
    <!--信息表1-->
    <table cellpadding="0" cellspacing="0" border="1">
        <!-- 导航栏 -->
        <tr>
            <td colspan="2"></td>
            <td><input type="text" placeholder="输入用户名" ng-model="ss" /></td>
            <!-- 查询年龄范围框 -->
            <td> 年龄：
                <select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
                    <option>--请选择--</option>
                    <option>11-20</option>
                    <option>21-30</option>
                    <option>31-40</option>
                    <option>41-50</option>
                    <option>51-60</option>
                </select>&nbsp;</td>

            <td colspan="2" align="right"><button ng-click="removes()">批量删除</button></td>
        </tr>
        <!-- 表头部分-->
        <tr>
            <th align="left"><input type="checkbox"></th>
            <th align="left"  ng-click="dian('id')">id</th>
            <th  ng-click="dian('name')">用户名</th>
            <th  ng-click="dian('age')">年龄</th>
            <th  ng-click="dian('sex')">性别</th>
            <th>操作</th>
        </tr>
        <!--循环遍历-->
        <tr ng-repeat="x in users |filter:{'name':ss} |orderBy:title:desc" ng-if="ageTest(x.age,ageSize)">
            <td><input type="checkbox" ng-model="x.pi"></td>
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
            <td>{{x.age}}</td>
            <td>{{x.sex}}</td>
            <td>
                <button ng-click="del(x.name)">删除</button>
            </td>
        </tr>
    </table>

    <button>添加信息</button>
    <!-- 添加信息表2-->
    <table cellpadding="10" cellspacing="1" border="1">
        <tr>
            <th>用户名</th>
            <td><input ng-model="name" placeholder="输入用户名"></td>
        </tr>
        <tr>
            <th>年龄</th>
            <td><input ng-model="age" placeholder="输入年龄"></td>
        </tr>
        <tr>
            <th>性别</th>
            <td><input ng-model="sex" placeholder="输入性别"></td>
        </tr>
        <!-- 提交按钮 -->
        <tr align="center">
            <td colspan="2"><input type="button" ng-click="sub()" value="提交"></td>
        </tr>

    </table>
    <!-- 修改信息表3 -->
    <table border="1" cellspacing="1" cellpadding="10">

        <button>修改信息</button>

        <tr>
            <th>用户名：</th>
            <td><input ng-model="names" placeholder="请输入用户名" /></td>
        </tr>
        <tr>
            <th>年龄</th>
            <td><input ng-model="ages" placeholder="请输入年龄" /></td>
        </tr>
        <tr>
            <th>性别</th>
            <td><input ng-model="sexs" placeholder="请输入性别" /></td>
        </tr>
        <!-- 提交按钮 -->
        <tr align="center">
            <td colspan="2"><input type="button" value="提交" ng-click="updates()" /></td>
        </tr>
    </table>

    </body>
</center>

</html>
天生犯二
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs之增删改查2

html>html>head> meta charset="utf-8" /> title>Angularjs的增删改查，排序，查询年龄范围title> //需要导入angular.js库文件 script type="text/javascript" src="angular-1.3.0.js">script> script type="text
复制链接

扫一扫
专栏目录