Angular非空添加验证

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <script src="angular.min.js"></script>
   <script src="jquery-3.2.1.min.js"></script>
   <script>
       var app = angular.module("myApp",[]);
       app.controller("myCtrl",function($scope){
           $scope.goods = [{
               "name":"张三",
               "age":26,
               "sex":"女",
               "pay":24000,
               "date":"1993-12-15 00:00:05",
               "bmname":"研发部"
           },{
               "name":"李四",
               "age":25,
               "sex":"男",
               "pay":26000,
               "date":"1994-07-04 09:20:01",
               "bmname":"市场部"
           },{
               "name":"王五",
               "age":25,
               "sex":"男",
               "pay":28000,
               "date":"1994-10-28 03:06:41",
               "bmname":"市场部"
           },{
               "name":"赵六",
               "age":30,
               "sex":"女",
               "pay":23000,
               "date":"1998-01-28 17:20:00",
               "bmname":"研发部"
           }];

           $scope.deleteGood = function(gname){
               for(var i=0;i<$scope.goods.length;i++){
                   if ($scope.goods[i].name == gname) {
                       $scope.goods.splice(i,1);
                   }
               }

           }


           $scope.selectName = "";
           $scope.selectBmname = "";
           $scope.orderKey = "";



           $scope.checkAll = function(){
               for (var i = 0;i<$scope.goods.length;i++) {
                   $scope.goods[i].ck = $scope.ck;
               }
           }

           $scope.delAll = function(){
               for (var i = 0;i<$scope.goods.length;i++) {
                   if($scope.goods[i].ck){
                       $scope.goods.splice(i,1);
                       i--;
                   }
               }
           }


           $scope.showAdd = false;


           $scope.addGood = function(){
               var good = {};
               if($scope.name == "" || $scope.name == null){
                   alert("姓名不可以为空");
                   return;
               }else{
                   good.name = $scope.name;
               }
               if($scope.age == "" || $scope.age == null){
                   alert("年龄不可以为空");
                   return;
               }else{
                   good.age =$scope.age;
               }
               if($scope.sex == '男' || $scope.sex == '女' ){
                   good.sex =$scope.sex;
               }else{
                   alert("性别只能为男或女")
                   return;
               }
               if($scope.pay == "" || $scope.pay == null){
                   alert("薪资不可以为空");
                   return;
               }else{
                   good.pay = $scope.pay;
               }
               if($scope.date== "" || $scope.date == null){
                   alert("日期不可以为空");
                   return;
               }else{
                   good.date = $scope.date;
               }
               if($scope.bmname == "" || $scope.bmname == null){
                   alert("部门不可以为空");
                   return;
               }else{
                   good.bmname = $scope.bmname;
               }

               $scope.goods.push(good);
               $scope.showAdd = false;
               $scope.showTable= true;
           }
           $scope.showTable= true;
       });
   </script>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <div>
               <input type="text" placeholder="根据姓名模糊查询.." ng-model="selectName" />
               <input type="text" placeholder="根据部门模糊查询.." ng-model="selectBmname" />
               <select ng-model="orderKey">
                   <option value="">根据薪资排序..</option>
                   <option value="pay">薪资正序</option>
                   <option value="-pay">薪资倒序</option>
                   <option value="date">出生日期排序</option>
                   <option value="-date">出生日期倒序</option>
               </select>
               <input type="button" value="批量删除" ng-click="delAll()" />
               <input type="button" value="增加" ng-click="showAdd = !showAdd" />
           </div>
           <div ng-show="showAdd">
               员工姓名:<input type="text" placeholder="请输入员工姓名" ng-model="name" /><br>
               员工年龄:<input type="text" placeholder="请输入员工年龄" ng-model="age"/><br>
               员工性别:<input type="text" placeholder="请输入员工性别" ng-model="sex"/><br>
               员工薪资:<input type="text" placeholder="请输入员工薪资" ng-model="pay"/><br>
               出生日期:<input type="date" placeholder="请输入出生日期" ng-model="date"/><br>
               部门名称:<input type="text" placeholder="请输入部门名称" ng-model="bmname"/><br>
               <input type="button" value="确认添加" ng-click="addGood()"/>
           </div>
           <table border="1px" ng-show="showTable">
               <tr style="background-color: gray;">
                   <td>
                       <input type="checkbox" ng-model="ck" ng-click="checkAll()" />
                   </td>
                   <td>员工姓名</td>
                   <td>员工年龄</td>
                   <td>员工性别</td>
                   <td>员工薪资</td>
                   <td>出生日期</td>
                   <td>部门名称</td>
                   <td>删除</td>
               </tr>
               <tr ng-repeat="g in goods | filter:selectName | filter:selectBmname | orderBy:orderKey">
                   <td>
                       <input type="checkbox" ng-model="g.ck" />
                   </td>
                   <td>{{g.name}}</td>
                   <td>{{g.age}}</td>
                   <td>{{g.sex}}</td>
                   <td>￥:{{g.pay}}</td>
                   <td>{{g.date}}</td>
                   <td>{{g.bmname}}</td>
                   <td>
                       <input type="button" value="删除" ng-click="deleteGood(g.name)" />
                   </td>
               </tr>
           </table>
       </center>
   </body>
</html>

Angular非空添加验证

猜你喜欢