Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)


Posted in Javascript onOctober 25, 2017

废话不多说了,直接给大家贴代码,具体代码如下所示;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
  <div style="width: 1000px">
    <input type="text" placeholder="用户名搜索" ng-model="yhmss"/>
    <input type="text" placeholder="手机号搜索" ng-model="sjhss"/>
    <select ng-model="Choicecity">
      <option>选择城市</option>
      <option>北京</option>
      <option>上海</option>
      <option>天津</option>
      <option>重庆</option>
    </select>
    <select ng-model="Choicestate">
      <option>选择状态</option>
      <option>发货</option>
      <option>已发货</option>
    </select>
    <select ng-model="Choiceorder">
      <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>
  </div>
  <button ng-click="tianjia()">新增订单</button>
  <button ng-click="plsc()">批量删除</button>
  <table>
    <thead>
    <tr style="background: #4404">
      <th><input type="checkbox" ng-model="checkAll" ng-click="quan()"/></th>
      <th>id<button ng-click="sort('id')" class="sspan">排序</button></th>
      <th>商品名</th>
      <th>用户名</th>
      <th>手机号</th>
      <th>价格<button ng-click="sort('price')" class="sspan">排序</button></th>
      <th>城市</th>
      <th>下单时间<button ng-click="sort('order')" class="sspan">排序</button></th>
      <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:{name:yhmss}|filter:{phone:sjhss}|filter:cityFun|filter:stateFun|filter:orderFun|orderBy:cc:dd">
      <td><input type="checkbox" ng-model="item.done"/></td>
      <td>{{$index+1}}</td>
      <td>{{item.commodity}}</td>
      <td>{{item.name}}</td>
      <td>{{item.phone}}</td>
      <td>{{item.price}}</td>
      <td>{{item.city}}</td>
      <td>{{item.order}}</td>
      <td ng-click="fahuo($index)"> {{item.state}} </td>
    </tr>
    </tbody>
  </table>
  <div ng-show="tj" style="margin-left: 200px" >
    <h1>添加</h1>
    <form name="registerForm" novalidate>
      <div id="email-group">
        <label for="email">E-mail:</label> <input type="email" class="form-control" ng-model="email" name="email" id="email" placeholder="请输入电子邮箱..." required>
        <p>
          <span style="color: red" ng-show=" registerForm.email.$invalid">
            <span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span
              ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
          </span>
        </p>
      </div>
      <div id="name-group">
        <label for="name">昵称:</label> <input type="text" class="form-control" ng-model="name" name="name" id="name" placeholder="请输入昵称..." required>
        <p>
          <span style="color: red" ng-show="registerForm.name.$invalid">
            <span ng-show="registerForm.name.$error.required">*请输入姓名</span>
          </span>
        </p>
      </div>
      <div id="password-group">
        <label for="password">密码:</label> <input type="password" class="form-control" ng-model="password"
                             ng-minlength="6" ng-maxlength="20" name="password" id="password"
                             placeholder="请输入密码..." required>
        <p>
          <span style="color: red" ng-show="registerForm.password.$invalid">
            <span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
            <span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
          </span>
        </p>
      </div>
      <div id="passwordagaingroup">
        <label for="passwordagain">再输入一遍密码:</label> <input type="password"
                                  class="form-control" ng-model="passwordagain" name="passwordagain"
                                  id="passwordagain" placeholder="请再输一遍密码..." required>
        <p>
          <span style="color: red" ng-show="registerForm.password.$valid">
            <span ng-show="passwordagain!=password">*两次密码输入不一致</span>
          </span>
        </p>
      </div>
      <button type="submit" class="btn btn-success" ng-click="tianjiapp()"
          ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">
        提交<span class="fa fa-arrow-right"></span>
      </button>
    </form>
  </div>
</body>
</html>
<script src="angular.js"></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>

总结

以上所述是小编给大家介绍的Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
js插件实现图片滑动验证码
Sep 29 #Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 #Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 #Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 #Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 #Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 #Javascript
javascript计算对象长度的方法
Oct 25 #Javascript
You might like
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP简洁函数小结
2011/08/12 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
java必学必会之static关键字
2015/12/03 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python模块的制作方法实例分析
2019/12/21 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python 进程池pool使用详解
2020/10/15 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
飘柔洗发水广告词
2014/03/14 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
个人德育工作总结
2015/03/05 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书