angularjs的增删改查（带下拉框的增加与修改）_angular js 弹出框修改数据-优快云博客

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="../libs/angular.js"></script>
  <script>
   var app=angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    //自拟数组
    $scope.heheda=[{
     id:1,
     name:"张三",
     age:21,
     sex:"男",
     tel:18611111111,
     hobby:"只爱学习"
    },{
     id:2,
     name:"李四",
     age:20,
     sex:"男",
     tel:18622222222,
     hobby:"独自学习"
    },{
     id:3,
     name:"小花",
     age:19,
     sex:"女",
     tel:18633333333,
     hobby:"听着歌学习"
    },{
     id:4,
     name:"翠花",
     age:18,
     sex:"女",
     tel:18644444444,
     hobby:"看书学习"
    },{
     id:5,
     name:"小风",
     age:18,
     sex:"男",
     tel:18655555555,
     hobby:"去图书馆看书"
    }];
    //删除
    $scope.deleteData=function(id){
     for(index in $scope.heheda){
      if(id == $scope.heheda[index].id){
       $scope.heheda.splice(index,1);
      }
     }
    }
    //显示隐藏添加
    $scope.isShow=false;
    $scope.Show=function(){
     if($scope.isShow){
      $scope.isShow=false;
     }else{
      $scope.isShow=true;
     }
    }
    //显示隐藏修改
    /*$scope.isShow1=false;
    $scope.Show1=function(){
     if($scope.isShow1){
      $scope.isShow1=false;
     }else{
      $scope.isShow1=true;
     }
    }*/
    //添加数据
    $scope.addData=function(){
     var flag1=false;
     var flag2=false;
     var flag3=false;
     var flag4=false;
     //姓名不能重复
     for(index in $scope.heheda){
      if($scope.newName == $scope.heheda[index].name){
       flag1=false;
       alert("姓名重复");
      }else{
       flag1=true;
      }
     }
     //年龄
     if(isNaN($scope.newAge)){
      flag2=false;
      alert("年龄必须是数字");
     }else if($scope.newAge.length <=0){
      flag2=false;
      alert("年龄长度必须大于0");
     }else{
      flag2=true;
     }
     //爱好
     if($scope.newHobby =="" || $scope.newHobby == null){
      flag3=false;
      alert("爱好不能为空");
     }else{
      flag3=true;
     }
     if(flag1 && flag2 && flag3){
     $scope.heheda.push({
     id:$scope.newId,
     name:$scope.newName,
     age:$scope.newAge,
     sex:$scope.newSex,
     tel:$scope.newTel,
     hobby:$scope.newHobby
     });
    }
   }
    //修改数据
     $scope.updateShowFun = function(hh) {
         $scope.updateId=hh.id;
     $scope.updateName=hh.name;
     $scope.updateAge=hh.age;
     $scope.updateSex=hh.sex;
     $scope.updateTel=hh.tel;
     $scope.updateHobby=hh.hobby;
       }
      $scope.updateData = function() {
        $scope.updateArr = [];
         for(index in $scope.heheda) {
          if(parseInt($scope.updateId) == $scope.heheda[index].id) {
          $scope.heheda[index].name = $scope.updateName;
          $scope.heheda[index].age = $scope.updateAge;
          $scope.heheda[index].sex = $scope.updateSex;
          $scope.heheda[index].tel = $scope.updateTel;
          $scope.heheda[index].hobby = $scope.updateHobby;
         }
      }
    }

    //查询
    $scope.searchName = function(){
     var flag = false;
     $scope.searchShow = "";
     for(index in $scope.heheda){
      if($scope.search == $scope.heheda[index].name){
       flag = true;
      }
     }
     if($scope.search == null || $scope.search == ""){
      alert("输入框不能为空");
      $scope.searchShow = "";
     }else if(flag){
      alert("姓名存在");
      $scope.searchShow = $scope.search;
     }else{
      alert("姓名不存在");
      $scope.searchShow = null;
     }
    }

   });
  </script>
  <style>
   td{text-align: center;}
   textarea{width: 300px; text-align:left;}
   tr:nth-child(even){background-color: blue;}
   tr:nth-child(odd){background-color: white;}
  </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center><br />
  年龄排序:<select ng-model="selOrder">
   <option value="">请选择</option>
   <option value="age">年龄正序</option>
   <option value="-age">年龄逆序</option>
  </select>　　　　　
  Id排序:<select ng-model="selOrder1">
   <option value="">请选择</option>
   <option value="id">id正序</option>
   <option value="-id">id逆序</option>
  </select>　　　　　
  姓名:<input type="text"placeholder="请输入姓名进行搜索" ng-model="search" />
  <button ng-click="searchName()">按照姓名查询</button>　　　　　
  <button ng-click="Show()">添加新用户</button><br /><br />
  <table border="1px solid black" cellpadding="6" cellspacing="0" width="1000px" >
   <thead>
    <tr style="background-color: gray;">
     <th>id</th>
     <th>姓名</th>
     <th>年龄</th>
     <th>性别</th>
     <th>联系方式</th>
     <th>爱好</th>
     <th>操作</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="hh in heheda | orderBy:selOrder | orderBy:selOrder1 | filter:searchShow">
     <td>{{hh.id}}</td>
     <td>{{hh.name}}</td>
     <td>{{hh.age}}</td>
     <td>{{hh.sex}}</td>
     <td>{{hh.tel}}</td>
     <td>{{hh.hobby}}</td>
     <td><button style="color: red; text-decoration: underline; border: none;" ng-click="updateShowFun(hh)">修改</button>
      <button style="color: red; text-decoration: underline; border: none;" ng-click="deleteData(hh.id)">删除</button></td>
    </tr>
   </tbody>
  </table><br />
  <form style="border: 1px solid deepskyblue; width: 600px;" ng-show="isShow">
   <h3>添加用户</h3>
   id:<input type="text"placeholder="请输入新id" ng-model="newId"/><br /><br />
   姓名:<input type="text"placeholder="请输入新姓名" ng-model="newName"/><br /><br />
   年龄:<input type="text"placeholder="请输入新年龄" ng-model="newAge"/><br /><br />
   性别:<select ng-model="newSex">
    <option selected="selected">请选择</option>
    <option>男</option>
    <option>女</option>
   </select><br /><br />
   联系方式:<input type="text"placeholder="请输入新联系方式" ng-model="newTel"/><br /><br />
   爱好:<textarea name="hehe" cols="30" rows="4" ng-model="newHobby"></textarea><br /><br />
    <input type="button"value="添加" ng-click="addData()"/>　
    <input type="reset" value="清空"/><br /><br />
  </form><br />
  <form style="border: 1px solid black; width: 600px;" >
   <h3>修改用户</h3>
   id:<input type="text"placeholder="请输入新修改id" ng-model="updateId" disabled="disabled"/><br /><br />
   姓名:<input type="text"placeholder="请输入新修改姓名" ng-model="updateName"/><br /><br />
   年龄:<input type="text"placeholder="请输入新修改年龄" ng-model="updateAge"/><br /><br />
   性别:<select ng-model="updateSex">
    <option selected="selected">请选择</option>
    <option>男</option>
    <option>女</option>
   </select><br /><br />
   联系方式:<input type="text"placeholder="请输入新修改联系方式" ng-model="updateTel"/><br /><br />
   爱好:<textarea name="hehe" cols="30" rows="4" ng-model="updateHobby"></textarea><br /><br />
    <input type="button"value="修改" ng-click="updateData()"/>　
    <input type="reset" value="清空"/><br />
  </form>
  </center>
</body>
</html>