angular 增删改查

来源：互联网发布：python执行mysql语句编辑：程序博客网时间：2024/05/29 04:35

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>

  <script>
   var app = angular.module("myapp",[]);
   app.controller("my",function($scope){
    //隐藏框
    $scope.add = false;
    //模拟数据
    $scope.user = [{
    id:1,
    yonghu:"曹操",
    nianling:15,
    mima:123456,
    jibie:1,
    shijian:new Date()
    },{
    id:3,
    yonghu:"刘备",
    nianling:35,
    mima:123456,
    jibie:4,
    shijian:new Date()
    },{
    id:2,
    yonghu:"孙权",
    nianling:85,
    mima:123456,
    jibie:3,
    shijian:new Date()
    },{
    id:4,
    yonghu:"关羽",
    nianling:95,
    mima:123456,
    jibie:3,
    shijian:new Date()
    },
    {
    id:10,
    yonghu:"大乔",
    nianling:55,
    mima:123456,
    jibie:4,
    shijian:new Date()
    },
    {
    id:8,
    yonghu:"小乔乔",
    nianling:40,
    mima:123456,
    jibie:2,
    shijian:new Date()
    }];


    //排序
    $scope.zhengdao = function(){
     var yy = $scope.zhengdaocha;
     if(yy == "1"){
      $scope.aa = 'jibie';
      $scope.bian = false;
     }else if(yy == "2"){
      $scope.aa = 'jibie';
      $scope.bian = true;
     }else if(yy == "3"){
      $scope.aa = 'shijian';
      $scope.bian = false;
     }else if(yy == "4"){
      $scope.aa = 'shijian';
      $scope.bian = true;
     }
    }


    //按照年龄段查询
    $scope.nianlingcha = "";
    $scope.nl = function(item) {
     if($scope.nianlingcha != "--请选择年龄段--") {
      var arr = $scope.nianlingcha.split("-");
      var min = arr[0];
      var max = arr[1];
      if(item.nianling > max || item.nianling < min) {
       return false;
      } else {
       return true;
      }
     } else {
      return true;
     }
    };


    //添加
    $scope.tijiao = function(){
     //隐藏框
    $scope.add = false;
    var id = $scope.id;
    var yonghu = $scope.yonghu;
    var nianling = $scope.nianling;
    var mima = $scope.mima;
    var jibie = $scope.jibie;
    var shijian = $scope.shijian;
    $scope.user.push({
     id:id,
     yonghu:yonghu,
     nianling:nianling,
     mima:mima,
     jibie:jibie,
     shijian:shijian,
    })
    $scope.id = "";
    $scope.yonghu = "";
    $scope.nianling = "";
    $scope.mima = "";
    $scope.jibie = "";
    $scope.shijian ="";
    };


    //敏感词
    $scope.yonghucha="";
    //在下面数字中定义的
    $scope.yonghucha2="";
    $scope.$watch("yonghucha",function(value){
     if(value.indexOf("小偷")!=-1||value.indexOf("抢劫")!=-1){
      alert("有敏感字，不能查询");
      $scope.yonghucha = "";
     }else{
      $scope.yonghucha2=$scope.yonghucha;
     }
    });


    //批量删除
    $scope.delpi = function(){
     var pi = [];
     for(index in $scope.user) {
      if($scope.user[index].shan == true) {
       pi.push($scope.user[index].id);
      }
     }
     if(pi.length > 0) {
      for(i in pi) {
       var id = pi[i];
       for(i2 in $scope.user) {
        if($scope.user[i2].id == id) {
         $scope.user.splice(i2, 1);
        }
       }
      }
     }
    }


    //全部删除
    $scope.delall = function(){
     if(confirm("确定要删除吗？")){
      $scope.user = [];
     }
    }


    //删除
    $scope.del = function(index){
     if(confirm("确定要删除吗？")){
      $scope.user.splice(index,1);
     }
    }
   })
  </script>
</head>

<center>
<body ng-app="myapp" ng-controller="my" style="margin-top: 50px;">
  <input placeholder="用户名搜索" ng-model="yonghucha"/>


  <select ng-model="jibiecha">
   <option value="">选择级别</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
  </select>


<select ng-model="zhengdaocha" ng-change="zhengdao()">
   <option value="">请选择排序</option>
   <option value="1">以级别正序排序</option>
   <option value="2">以级别倒序排序</option>
   <option value="3">以时间正序排序</option>
   <option value="4">以时间倒序排序</option>
</select>

<select ng-model="nianlingcha">
   <option value="">--请选择年龄段选择--</option>
   <option>0-30</option>
   <option>30-60</option>
   <option>60-100</option>
</select><br />

  <button type="button" ng-click="add = true">新增用户</button>
  <button type="button" ng-click="delpi()">批量删除</button>
  <button type="button" ng-click="delall()">全部删除</button>
  <span style="margin-left: 50px;">敏感词：抢劫，小偷</span>


  
  <table border="1">
   <tr>
    <td>
     <input type="checkbox" ng-model="quanxuan" />
    </td>
    <td>ID</td>
    <td>用户名</td>
    <td>年龄</td>
    <td>密码</td>
    <td>级别<button ng-click="aa='jibie';bian=!bian">排序</button></td>
    <td>创建时间<button ng-click="aa='shijian';bian=!bian">排序</button></td>
    <td>操作</td>
   </tr>


   
   <tr ng-repeat="i in user | filter:{'yonghu':yonghucha,'jibie':jibiecha,'yonghu':yonghucha2} | filter:nl |orderBy:aa:bian"">
    <td>
     <input type="checkbox" ng-checked="quanxuan" ng-model="i.shan"/>
    </td>
    <td>{{i.id}}</td>
    <td>{{i.yonghu}}</td>
    <td>{{i.nianling}}</td>
    <td>
     
    <span ng-hide="i.edit">{{i.mima}}</span>
    <span ng-show="i.edit == true"><input ng-model="i.mima" /></span>
    </td>
    <td>{{i.jibie}}</td>
    <td>{{i.shijian |date: "yyyy-MM-dd hh:mm:ss"}}</td>
    <td>
     <button ng-click="del($index)">删除</button> |
     <button ng-hide="i.edit" ng-click="i.edit = true">修改</button>
     <button ng-show="i.edit == true" ng-click="i.edit = false">保存</button>
    </td>
   </tr>

  </table>


  <form ng-show="add">
   ID：<input type="text" ng-model="id" /><br />
   用户名：<input type="text" ng-model="yonghu" /><br />
   年龄：<input type="text" ng-model="nianling" /><br />
   密码：<input type="text" ng-model="mima" /><br />
   级别：<input type="text" ng-model="jibie" /><br />
   创建时间：<input type="date" ng-model="shijian" /><br />
   <button ng-click="tijiao()">提交</button>
  </form>
</body>
</center>
</html>

阅读全文

0 0