angularJS添加表格，通过过滤器查找

来源：互联网发布：回收站误删恢复软件编辑：程序博客网时间：2024/06/08 04:53

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   table{
    margin-top: 20px;
   }
   .table1{
    width: 600px;
   }
  </style>
  <script type="text/javascript" src="js/angular.min.js" ></script>
  <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>

<script>
  var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  //定义数组
    $scope.user= [{
            "id": 1,
            "name": "张三",
            "age": 18,
            "sex": "男",
            "state": false
        },
        {
            "id": 2,
            "name": "李四",
            "age": 15,
           "sex": "女",
            "state": false
        },
        {
            "id": 3,
            "name": "王五",
            "age": 20,
            "sex": "男",
            "state": false
        },
        {
            "id": 4,
            "name": "王二",
            "age": 18,
            "sex": "女",
            "state": false
        }
    ]
    //删除方法
    $scope.del = function(index) {
        if(confirm("确认要删除吗？")) {
            $scope.user.splice(index, 1);
        }
    }
    //全部删除
    $scope.delall = function() {
        if(confirm("确认要全部删除吗？")) {
            $scope.user = []
        }
    }
    //添加方法
    $scope.name ="";
    $scope.age ="";
    $scope.sex ="";
    $scope.add = function() {
        var newUser = {
            id:$scope.user.length+1,
            name:$scope.name,
            age:$scope.age,
            sex:$scope.sex,
        }
//      alert($scope.name);
        $scope.user.push(newUser);
    }
   //批量删除
    $scope.delpi = function(){
        var userNames =[];
        for(index in $scope.user){
            if($scope.user[index].state == true){
                userNames.push($scope.user[index].name);
            }
        }
       if(userNames.length>0){
           if(confirm("是否删除选中的?")){
                for(i in userNames){
                    var name = userNames[i];
                    for(i2 in $scope.user){
                        if($scope.user[i2].name == name){
                           $scope.user.splice(i2,1);
                        }
                    }
               }
            }
        }else{
            alert("请选择")
        }
    }
   /* $scope.bb=function(){

    alert();

    var a=$scope.selage.split("-");
    for (var i=0;i<a.length;i++) {
    if($scope.user[i].age<a[1]&&$scope.user[i].age>a[0]){

    }

    }

    }*/



});

</script>
</head>

  <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            姓名查找<input type="text" ng-model="search" placeholder="请输入名字"/>
            年龄查找<select style="width: 60px;" ng-model="selage" >
            <option>15-20</option>
            <option>20</option>
            <option>18</option>
            </select>
            性别查找<select style="width: 60px;" ng-model="selsex">
            <option>男</option>
            <option>女</option>

            </select>
            <button type="button" ng-click="delall()">全部删除</button>
            <button type="button" ng-click="delpi()">批量删除</button>


            
            <table border="1px" cellpadding="10" cellspacing="0" class="table1">
                <thead>
                    <tr>
                        <th style="text-align: center">
                            全选<input type="checkbox" ng-model="quanxuan" />
                        </th>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                </thead>
               <tbody>
               
                   <tr ng-repeat="x in user | filter:{'name':search,'sex':selsex,'age':selage}" align="center">
                        <td>
                            <input type="checkbox" ng-checked="quanxuan" ng-model="x.state" />
                        </td>
                        <td>{{x.id}}</td>
                        <td>{{x.name}}</td>
                        <td>{{x.age}}</td>
                        <td>{{x.sex}}</td>
                        <td>
                            <button type="button" ng-click="del($index)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>


             <button type="button" ng-click="bb()" style="margin-top: 15px;">添加用户</button>

            
            <table border="1" cellpadding="10" cellspacing="0">
                    <tr>
                        <td>姓名:</td>
                        <td>
                            <input type="text" placeholder="请输入姓名" ng-model="name"/>
                        </td>
                    </tr>
                    <tr>
                        <td>年龄:</td>
                       <td>
                            <input type="text" placeholder="请输入年龄" ng-model="age"/>
                        </td>
                    </tr>
                    <tr>
                        <td>性别:</td>
                        <td>
                            <input type="text" placeholder="请输入性别" ng-model="sex"/>
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2">
                           <button type="button" ng-click="add()">提交</button>
                       </td>
                    </tr>
            </table>
        </center>
    </body>

</html>

阅读全文

0 0