Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung einiger Funktionen der Winkelsuche, Filterung und Stapellöschung

小云云
Freigeben: 2018-01-02 16:34:07
Original
1356 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Sammlung von Angular-Such-, Filter-, Batch-Lösch- und Additionsformular-Überprüfungsfunktionen vorgestellt (Beispielcode, der darauf verweisen kann).

Ohne weitere Umschweife werde ich den Code für Sie veröffentlichen


<!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">
  <p 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>
  </p>
  <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(&#39;id&#39;)" class="sspan">排序</button></th>
      <th>商品名</th>
      <th>用户名</th>
      <th>手机号</th>
      <th>价格<button ng-click="sort(&#39;price&#39;)" class="sspan">排序</button></th>
      <th>城市</th>
      <th>下单时间<button ng-click="sort(&#39;order&#39;)" 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>
  <p ng-show="tj" style="margin-left: 200px" >
    <h1>添加</h1>
    <form name="registerForm" novalidate>
      <p 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>
      </p>
      <p 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>
      </p>
      <p 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>
      </p>
      <p 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>
      </p>
      <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>
  </p>
</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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Beispiel einer von AngularJS implementierten sekundären Verknüpfungsfunktion für Provinzen und Gemeinden

AngularJS implementiert die Erinnerungsfunktion für die Wortbeschränkung im Eingabefeld

AngularJS-Umgebungseinstellungs-Tutorial

Das obige ist der detaillierte Inhalt vonZusammenfassung einiger Funktionen der Winkelsuche, Filterung und Stapellöschung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage