Validation function of Angular operation form add, delete, modify and check

This time I will bring you the verification function of adding, deleting, modifying and checking the Angular operation form. What are the precautions for the verification function of adding, deleting, modifying and checking the Angular operation form. The following is a practical case, let’s take a look.

nbsp;html>


  <meta>
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .sspan{
      background: #28a54c;
      color: #fff;
      margin-left: 5px;
    }
    th,td{
      border: 1px solid #000;
      padding: 10px;
    }
    table{
      text-align: center;
      width: auto;
      border-collapse: collapse;
    }
    button{
      margin-top: 10px;
      margin-bottom: 10px;
    }
  </style>


  <p>
    <input>
    <input>
    <select>
      <option>选择城市</option>
      <option>北京</option>
      <option>上海</option>
      <option>天津</option>
      <option>重庆</option>
    </select>
    <select>
      <option>选择状态</option>
      <option>发货</option>
      <option>已发货</option>
    </select>
    <select>
      <option>开始月份</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
    -
    <select>
      <option>结束月份</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </p>
  <button>新增订单</button>
  <button>批量删除</button>
  

                                                                                                                                                                        

	id排序	商品名	用户名	手机号	价格排序	城市	下单时间排序	状态
	{{$index+1}}	{{item.commodity}}	{{item.name}}	{{item.phone}}	{{item.price}}	{{item.city}}	{{item.order}}	{{item.state}}

  

    

添加

    

      

        E-mail:          

                       *请输入邮箱 *请输入正确的email地址                    

             

        昵称：          

                       *请输入姓名                    

             

        密码：          

                       *密码长度不小于6             *密码长度不超过20                    

             

        再输入一遍密码：          

                       *两次密码输入不一致                    

                      提交            

   <script></script>   <script> var app = angular.module("myapp",[]); app.controller("myCtrl",function ($scope) { $scope.data = [ { commodity:"iPhone4", name:"张三", phone:151111111, price:4999, city:"北京", order:"8-1", state:"发货", done:false }, { commodity:"小米6", name:"李四", phone:15222222, price:2999, city:"北京", order:"8-2", state:"发货", done:false }, { commodity:"华为P9", name:"王五", phone:153333333, price:3999, city:"上海", order:"9-3", state:"已发货", done:false }, { commodity:"OPPO R11", name:"赵六", phone:15444444, price:4999, city:"天津", order:"9-4", state:"已发货", done:false }, { commodity:"ViVo", name:"钱七", phone:155555555, price:2999, city:"重庆", order:"10-4", state:"已发货", done:false } ]; $scope.Choicecity = "选择城市"; $scope.cityFun = function (item) { if($scope.Choicecity != "选择城市"){ if( item.city == $scope.Choicecity){ return true; }else { return false; } }else { return true; } }; $scope.Choicestate = "选择状态"; $scope.stateFun = function (item) { if($scope.Choicestate != "选择状态"){ if(item.state == $scope.Choicestate){ return true; }else { return false; } }else { return true; } }; $scope.pl = "已发货"; $scope.fahuo = function (index) { if($scope.data[index].state=="发货"){ $scope.data[index].state =$scope.pl; } }; $scope.Choiceorder = "开始月份"; $scope.orderFun = function (item) { if($scope.Choiceorder != "开始月份"){ var arr = $scope.order.split("-"); var min = arr[0]; var max = arr[1]; if(item.order >= min){ return false; }else { return true; } }else { return true; } } $scope.quan = function () { if($scope.checkAll == true){ for(var i = 0 ; i <$scope.data.length ; i++){ $scope.data[i].done = true; } }else{ for(var i = 0 ; i <$scope.data.length ; i++){ $scope.data[i].done = false; } } }; $scope.plsc = function () { for(var i = 0 ; i <$scope.data.length ; i++){ if($scope.data[i].done == true){ $scope.data.splice(i,1); i--; } } }; $scope.tj = false; $scope.tianjia = function () { $scope.tj = true; }; $scope.error = false; $scope.tijiaola = function () { if($scope.commoditys==null||$scope.names==null|| $scope.commoditys<6||$scope.commoditys.length>20){ $scope.error = true; } }; $scope.dd = false; $scope.cc = "id"; $scope.sort = function (couldm) { if($scope.cc == couldm ){ $scope.dd =! $scope.dd; } $scope.cc = couldm; } $scope.tianjiapp = function () { $scope.data.push({commodity:$scope.email,name:$scope.name,phone:$scope.password}) } }) </script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does Yuansheng JS implement asynchronous file upload

Required.js graphic and text explanation

The above is the detailed content of Validation function of Angular operation form add, delete, modify and check. For more information, please follow other related articles on the PHP Chinese website!