AngluarJS

HTML5

    <style>

        .d1{
            margin-left: 180px;
        }

        table{
            border: 1px solid black;
        }

        th,td{
            border: 1px solid black;
            width: 100px;
            height: 35px;
            text-align: center;
        }

        tbody tr:nth-child(2n){
            background: deepskyblue;
        }

        table tr:hover{
            background: greenyellow;
        }
    </style>

    <script src="lib/js/ionic.bundle.js"></script>

    <script>
          angular.module("myApp",[])

          .controller("lcz",function($scope,$filter){

               $scope.isshow = false;

               $scope.arr = [{
                     "checked":false,
                     "id":1,
                     "name":"张三",
                     "age":45,
                     "ping":"zhang san",
                     "zhiwei":"总经理"
                    },
                    {
                     "checked":false,
                     "id":2,
                     "name":"李四",
                     "age":43,
                     "ping":"li si",
                     "zhiwei":"设计师"
                    },
                    {
                     "checked":false,
                     "id":3,
                     "name":"王五",
                     "age":40,
                     "ping":"wang wu",
                     "zhiwei":"工程师"
                    },
                    {
                     "checked":false,
                     "id":4,
                     "name":"赵六",
                     "age":33,
                     "ping":"zhao liu",
                     "zhiwei":"工程师" 
                    },
                    {
                     "checked":false,
                     "id":5,
                     "name":"周七",
                     "age":32,
                     "ping":"zhou qi",
                     "zhiwei":"人事经理"
                    }
               ];

               $scope.arrs=$scope.arr;

               $scope.del = function(id){

                     for(var i=0; i<$scope.arrs.length; i++){
                          if($scope.arrs[i].id==id){
                            if(confirm("是否确认删除")){
                                alert("数据删除成功！");
                                $scope.arrs.splice(i,1);
                            }                         
                          }
                     }
               }

               $scope.selectName = function(){                  

                    var val = $scope.selname;

                    var $f = $filter("filter");

                    if(val==null){
                        alert("请输入姓名");
                        return;
                    } 

                    if(val=="AA"){
                        alert("输入敏感词重新输入");
                        return;
                    }

                    for(var i=0; i<$scope.arrs.length; i++){
                        if(val==$scope.arrs[i].name){
                            $scope.arrs=$f($scope.arr,{"name":val});
                            return;
                        }
                    }

                    for(var i=0; i<$scope.arrs.length; i++){
                        if(val!=$scope.arrs[i].name){
                            alert("查找不到输入内容!");
                            return;
                        }
                    }
               }

               $scope.show = function(){
                    $scope.isshow = true;
               }

               $scope.addUser = function(){
                    var i = $scope.arr.length+1;
                     $scope.arrt = [];//放错误信息

                    var tips = false;//默认数组隐藏

                    var num = /^[0-9]*$/;

                   if($scope.name == null){
                        $scope.arrt.push("姓名不能为空");
                    }

                   if(!num.test($scope.age)){
                        $scope.arrt.push("年龄格式错误");
                    }
                   if($scope.arrt.length>0){
                        $scope.tips = true;
                    }else{
                         $scope.arr.push({
                           "id":i++,
                           "name":$scope.name,
                           "age":$scope.age,
                           "ping":$scope.ping,
                           "zhiwei":$scope.zhiwei,
                    })

                    $scope.arrs=$scope.arr;

                    $scope.isshow=false;

                    }

               }

               $scope.ckAll = function(){

                    var ck = $scope.isc;

                    for(var i=0; i<$scope.arrs.length; i++){
                         $scope.arrs[i].checked=ck;
                    }
               }

               $scope.delAll = function(){

                    var b = false;

                    for(var i=0; i<$scope.arrs.length; i++){
                          if($scope.arrs[i].checked==true){
                              b=true;
                              break;
                          }
                    }

                    if(b==true){
                        for(var i=0; i<$scope.arrs.length; i++){
                            if($scope.arrs[i].checked==true){
                                $scope.arrs.splice(i,1);
                                i--;
                            }
                        }
                    }
               }
          })
    </script>
</head>
<body ng-app="myApp" ng-controller="lcz">
    <div>

        <span style="font: 10px;">
               用户列表
        </span>

        姓名查询条件<input type="text" placeholder="请输入姓名..." ng-model="selname"/>

        <select ng-model="selectOrder">
            <option value="">--请选择--</option>
            <option value="-age">按年龄倒序</option>
            <option value="age">按年龄正序</option>
            <option value="ping">按拼音正序</option>
            <option value="-ping">按拼音倒序</option>
        </select>
    </div>

    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th><input type="checkbox" ng-click="ckAll()" ng-model="isc"></th>
                <th>姓名</th>
                <th>年龄</th>
                <th>拼音</th>
                <th>职位</th>
                <th>操作</th>
            </tr>

            <tbody>
                <tr ng-repeat="arr in arrs|orderBy:selectOrder">
                    <td><input type="checkbox" ng-model="arr.checked"/></td>
                    <td>{{arr.name}}</td>
                    <td>{{arr.age}}</td>
                    <td>{{arr.ping}}</td>
                    <td>{{arr.zhiwei}}</td>
                    <td><button ng-click="del(arr.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="d1">
        <input type="button" value="查询" ng-click="selectName()"/>

        <input type="button" value="添加" ng-click="show()"/>

        <input type="button" value="批量删除" ng-click="delAll()" />        </div>

    <div ng-show="isshow">
        <form>
                    姓名:<input type="text" ng-model="name"/>
                    年龄:<input type="text" ng-model="age"/>
                    拼音:<input type="text" ng-model="ping"/>
                    职位:<input type="text" ng-model="zhiwei"/>
                     <input type="button" value="保存" ng-click="addUser()"/><br />
                     <div>
                        <ul>
                            <li ng-repeat="c in arrt">{{c}}</li>
                        </ul>
                     </div>
        </form>
    </div>
</body>