增删查

nyf19980311

于 2017-12-21 11:35:14 发布

阅读量250

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/nyf19980311/article/details/78861865

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   tbody tr:nth-child(even)
   {
            background: #00000;
            }
            tbody tr:nth-child(odd)
            {
            background: greenyellow;
            }

</style>

<script type="text/javascript" src="js/angular.js" ></script>
  <script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.student = [{
     "name":"张三",
     "age":45,
     "py":"zhangsan",
     "zw":"总经理",
    },{
     "name":"李四",
     "age":43,
     "py":"lisi",
     "zw":"设计师",
    },{
     "name":"王五",
     "age":40,
     "py":"wangwu",
     "zw":"工程师",
    },{
     "name":"赵六",
     "age":33,
     "py":"zhaoliu",
     "zw":"工程师",
    },{
     "name":"周七",
     "age":32,
     "py":"zhouqi",
     "zw":"人事经理",
    }];

    $scope.px = "";

    //删除
    $scope.sc = function(name){
     if (window.confirm("确定删除？")) {
      for (index in $scope.student) {
       if (name == $scope.student[index].name) {
        $scope.student.splice(index,1);
       }
      }
     }
    }
    //添加
    $scope.bc = function(){


     if ($scope.newname == null || $scope.newname == "") {
      alert("姓名不能为空");
     }else if(isNaN($scope.newname)){
      alert("姓名不能是数字");
     }else{
      if ($scope.newage == null || $scope.newage == "") {
       alert("姓名不能为空");
      }else if (isNaN($scope.newage)) {
       alert("年龄格式错误,必须数字");
      }else if($scope.newage.length != 2){
       alert("年龄必须是2位");
      }else{
       if ($scope.newpy == null || $scope.newpy == "") {
        alert("拼音不能为空");
       }else{
        if ($scope.newzw == null || $scope.newzw == "") {
         alert("拼音不能为空");
        }else{
         var newShop = {
          name:$scope.newname,
          age:parseInt($scope.newage),
          py:$scope.newpy,
          zw:$scope.newzw,
          num:1,
          state:false
         };
        }
       }
      }
     }

     $scope.student.push(newShop);
    }

    //查询
    $scope.searchname = function(){
     var flag = false;
     $scope.searchshow = "";
     for (index in $scope.student) {
      if ($scope.search == $scope.student[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>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   姓名查询条件：<input ng-model="search" />
   <button ng-click="searchname()">查询</button>
   <select ng-model="px">
    <option value="">按年龄排序</option>
    <option value="age">按年龄正序</option>
    <option value="-age">按年龄倒序</option>
   </select><br /><br />

   <table border="1px" cellpadding="10" cellspacing="0">
    <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>拼音</th>
     <th>职位</th>
     <th>操作</th>
    </tr>
    <tr ng-repeat="p in student | orderBy:px | filter:searchshow" align="center">
     <td>{{p.name}}</td>
     <td>{{p.age}}</td>
     <td>{{p.py}}</td>
     <td>{{p.zw}}</td>

     
     <td><button ng-click="sc(p.name)" style="cursor: pointer;">删除</button></td>
    </tr>
   </table>
   <button>添加用户</button>
   <form>
    姓名：<input type="text" ng-model="newname"/><br /><br />
    年龄：<input type="text" ng-model="newage"/><br /><br />
    拼音：<input type="text" ng-model="newpy"/><br /><br />
    职位：<input type="text" ng-model="newzw"/><br /><br />

    <button ng-click="bc()">保存</button>
   </form>
  </center>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。