Angular操作表單增刪改查的驗證功能

這次帶給大家Angular操作表單增刪改查的驗證功能，Angular操作表單增刪改查驗證功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

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>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

來源生JS怎麼實作檔案異步上傳

#Require.js圖文詳解

#

以上是Angular操作表單增刪改查的驗證功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！