信息题(查询+批量删除+修改+添加)

<!DOCTYPE html>
<html>

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



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

            //定义一个数组
            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>

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值