angularJS增删改查，非空，年龄区间

最新推荐文章于 2021-06-19 12:06:02 发布

得劲得演员

最新推荐文章于 2021-06-19 12:06:02 发布

阅读量189

点赞数

分类专栏： angular代码

本文链接：https://blog.csdn.net/qq_41636736/article/details/79078039

版权

angular代码专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../js/angular.js" ></script>
  <script>
   var app=angular.module("myapp",[]);
   app.controller("mycon",function($scope){
    $scope.shuzu=[
    {
     name:"张飞",
     pass:1234567,
     age:19,
     sex:"男",
     state:focus
    },
    {
     name:"关羽",
     pass:123456734,
     age:20,
     sex:"男",
     state:focus
    },
    {
     name:"赵云",
     pass:1264567,
     age:18,
     sex:"男",
     state:focus
    },
    ]
   //添加
    $scope.jia=false;
    $scope.add=function(){
     var newname=$scope.x_name;
     var newpass=$scope.x_pass;
     //非空
     $scope.errors=[];
     if(newname=="" || newname==undefined){
      $scope.errors.push("用户名不能为空");
     }
     if(newpass=="" || newpass==undefined){
      $scope.errors.push("密码不能为空");
     }

     if($scope.errors.length==0){
     var s={
      name:newname,
      pass:newpass,
      age:$scope.x_age,
      sex:$scope.x_sex,
     }
     $scope.shuzu.push(s);
     $scope.jia=false;
     }
    }
   //全选
    $scope.quan=false;
    $scope.xuan=function(){
     if($scope.quan){
      for(index in $scope.shuzu){
       $scope.shuzu[index].state=true
      }
     }else{
      for(index in $scope.shuzu){
       $scope.shuzu[index].state=false
      }
     }
    }
   //批量删除
    $scope.pisan=function(){
     if(confirm("确认删除吗")){
      for(var i=0;i<$scope.shuzu.length;i++){
       if($scope.shuzu[i].state==true){
        $scope.shuzu.splice(i, 1);
        i--;
       }
      }
     }
    }
   //全删
    $scope.qsan=function(){
     if(confirm("确认全部删除吗")){
      for(var i=0;i<$scope.shuzu.length;i++){

       $scope.shuzu.splice(i, 1);
       i--;

      }
     }
    }
   //判断年龄区间
    $scope.ageSize=function(age){
     if($scope.size=="" || $scope.size==undefined){
      return true;
     }else{
     var a=$scope.size.split("-");
     var min=a[0];
     var max=a[1];
     if(age>=min && age<=max){
      return true;
     }else{
      return false;
     }
     }
    }
   });
  </script>
</head>
<body ng-app="myapp" ng-controller="mycon" >
  <center>
   姓名查找<input type="text" ng-model="mohu"/>
   年龄查找<select ng-model="size">
    <option value="">请选择</option>
    <option>1-10</option>
    <option>10-20</option>
    <option>20-30</option>
   </select>
   性别查找<select ng-model="xing">
    <option value="">-请选择-</option>
    <option value="男">--男--</option>
    <option value="女">--女--</option>
   </select>
   <button ng-click="qsan()">删除全部</button>
   <button ng-click="pisan()">批量删除</button><br><br>
  <table cellpadding="15" cellspacing="0" border="1">
   <thead>
    <tr>
     <th>全选<input type="checkbox" ng-click="xuan()" ng-model="quan"></th>
     <th>序号</th>
     <th>姓名</th>
     <th>密码</th>
     <th>年龄</th>
     <th>性别</th>
     <th>操作</th>
    </tr>
   </thead>

   <tbody>
    <tr ng-repeat="diao in shuzu | filter:{name:mohu} | filter:{sex:xing}" align="center" ng-if="ageSize(diao.age)">
     <td><input type="checkbox" ng-model="diao.state"></td>
     <td>{{$index}}</td>
     <td>{{diao.name}}</td>
     <td><span ng-hide="mikuan">{{diao.pass}}</span><span ng-show="mikuan"><input type="text" ng-model="diao.pass"><button ng-click="mikuan=false">保存</button></span></td>
     <td>{{diao.age}}</td>
     <td>{{diao.sex}}</td>
     <td><button ng-click="mikuan=true">修改密码</button></td>
    </tr>
   </tbody>
  </table>
  <br>
  <button ng-click="jia=true">添加用户</button><br><br>
  <table cellpadding="10" cellspacing="0" border="1" ng-show="jia">
   <tr>
    <td>姓名</td>
    <td><input type="text" placeholder="请输入姓名" ng-model="x_name"></td>
   </tr>
   <tr>
    <td>密码</td>
    <td><input type="text" placeholder="请输入密码" ng-model="x_pass"></td>
   </tr>
   <tr>
    <td>年龄</td>
    <td><input type="text" placeholder="请输入年龄" ng-model="x_age"></td>
   </tr>
   <tr>
    <td>性别</td>
    <td><input type="text" placeholder="请输入性别" ng-model="x_sex"></td>
   </tr>
   <tr align="center">
    <td colspan="2"><button ng-click="add()">提交</button></td>
   </tr>
  </table>
  <p ng-show="errors.length!=0" ng-repeat="e in errors">{{e}}</p>
  </center>
</body>
</html>

得劲得演员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS增删改查，非空，年龄区间

var app=angular.module("myapp",[]); app.controller("mycon",function($scope){ $scope.shuzu=[ { name:"张飞", pass:1234567, age:19, sex:"男", state:focus },
复制链接

扫一扫