1. 首頁
  2. 問答
  3. 多選下拉式過濾器AngularJS邏輯

多選下拉式過濾器AngularJS邏輯

2017-07-25 68 views
1

感謝您花時間閱讀我的問題。我目前正在使用AngularJS UI-Grid，我爲「First Name」列實現了多選下拉菜單。但是，我有一些問題，因爲這是多選的，所以理解如何實現邏輯，就像我爲「男」&「女」列所做的那樣。如果有人可以請我幫助我關於我已經爲第一列「名字」創建的例子的邏輯。至少一些指導將不勝感激。先謝謝你！ 此外，您可能會注意到網格已損壞，標題行被卡住，而不是水平滾動。這已被修復！多選下拉式過濾器AngularJS邏輯

這裏是笨蛋！ https://plnkr.co/edit/cAiZOIBpYZgDpfwspABK?p=preview

這是我的一些角&的HTML代碼！ 我知道我的代碼不是很乾，我很快就會重構我的代碼。

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 

    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-animate.js"></script> 
    <script data-require="[email protected]*" data-semver="1.3.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script> 
    <script data-require="[email protected]*" data-semver="4.0.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/1.11.8/angularjs-dropdown-multiselect.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script data-require="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <!--LINK TAGS--> 
    <link data-require="[email protected]*" data-semver="4.0.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.css" /> 
    <link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body ng-controller="mainCtrl"> 

     <button id="filterButton" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Filter Columns</button> 

     <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><strong>Filter Columns</strong></h4> 
      </div> 
      <div class="modal-body"> 
        <table> 
        <thead> 
         <tr> 
         <th>Column Name:</th> 
         <th>Filter:</th> 
         <th>Value:</th> 
         </tr> 
        </thead> 
         <tbody> 
         <tr> 
         <!-- FIRST COLUMN ROW --> 
         <td> 
          <select ng-model="columnName" class="form-control" class="columnName"> 
           <option></option> 
           <option>First Name</option> 
           <option>Last Name</option> 
           <option>Company</option> 
           <option>Employed</option> 
           <option>Gender</option> 
           <option>Country</option> 
           <option>DOB</option> 
           <option>Age</option> 
          </select> 
         </td> 
         <td> 
          <select ng-model="filter" class="form-control" class="filter"> 
           <option>Equal to</option> 
           <option>Contains</option> 
           <option>in between</option> 
           <option>Not equal to</option> 
           <option>Greater than</option> 
           <option>Less than</option> 
          </select> 
         </td> 
         <td> 
          <input class="form-control" type="text"> 
         </td> 
         <!-- FIRST COLUMN ROW --> 
         </tr> 
         <tr> 
         <!-- SECOND COLUMN ROW --> 
         <td> 
          <select class="form-control" class="columnName"> 
           <option></option> 
           <option>First Name</option> 
           <option>Last Name</option> 
           <option>Company</option> 
           <option>Employed</option> 
           <option>Gender</option> 
           <option>Country</option> 
           <option>DOB</option> 
           <option>Age</option> 
          </select> 
         </td> 
         <td> 
          <select class="form-control" class="filter"> 
           <option>Equal to</option> 
           <option>Contains</option> 
           <option>in between</option> 
           <option>Not equal to</option> 
           <option>Greater than</option> 
           <option>Less than</option> 
          </select> 
         </td> 
         <td> 
          <input class="form-control" type="text"> 
         <!-- SECOND COLUMN ROW --> 
         </tr> 
         <tr> 
         <!-- THIRD COLUMN ROW --> 
         <td> 
          <select class="form-control" class="columnName"> 
           <option></option> 
           <option>First Name</option> 
           <option>Last Name</option> 
           <option>Company</option> 
           <option>Employed</option> 
           <option>Gender</option> 
           <option>Country</option> 
           <option>DOB</option> 
           <option>Age</option> 
          </select> 
         </td> 
         <td> 
          <select class="form-control" class="filter"> 
           <option>Equal to</option> 
           <option>Contains</option> 
           <option>in between</option> 
           <option>Not equal to</option> 
           <option>Greater than</option> 
           <option>Less than</option> 
          </select> 
         </td> 
         <td> 
          <input class="form-control" type="text"> 
         </td> 
         <!-- THIRD COLUMN ROW --> 
         </tr> 
         <tr> 
         <!-- FORTH COLUMN ROW --> 
         <td> 
          <select class="form-control" class="columnName"> 
           <option></option> 
           <option>First Name</option> 
           <option>Last Name</option> 
           <option>Company</option> 
           <option>Employed</option> 
           <option>Gender</option> 
           <option>Country</option> 
           <option>DOB</option> 
           <option>Age</option> 
          </select> 
         </td> 
         <td> 
          <select class="form-control" class="filter"> 
           <option>Equal to</option> 
           <option>Contains</option> 
           <option>in between</option> 
           <option>Not equal to</option> 
           <option>Greater than</option> 
           <option>Less than</option> 
          </select> 
         </td> 
         <td> 
          <input class="form-control" type="text"> 
         </td> 
         <!-- FORTH COLUMN ROW --> 
         </tr> 
         <tr> 
         <!-- FIFTH COLUMN ROW --> 
         <td> 
          <select class="form-control" class="columnName"> 
           <option></option> 
           <option>First Name</option> 
           <option>Last Name</option> 
           <option>Company</option> 
           <option>Employed</option> 
           <option>Gender</option> 
           <option>Country</option> 
           <option>DOB</option> 
           <option>Age</option> 
          </select> 
         </td> 
         <td> 
          <select class="form-control" class="filter"> 
           <option>Equal to</option> 
           <option>Contains</option> 
           <option>in between</option> 
           <option>Not equal to</option> 
           <option>Greater than</option> 
           <option>Less than</option> 
          </select> 
         </td> 
         <td> 
          <input class="form-control" type="text"> 
         </td> 
         <!-- FIFTH COLUMN ROW --> 
         </tr> 
         <tr> 
         <!-- SIXTH COLUMN ROW --> 
         <td> 
          <select class="form-control" class="columnName"> 
           <option></option> 
           <option>First Name</option> 
           <option>Last Name</option> 
           <option>Company</option> 
           <option>Employed</option> 
           <option>Gender</option> 
           <option>Country</option> 
           <option>DOB</option> 
           <option>Age</option> 
          </select> 
         </td> 
         <td> 
          <select class="form-control" class="filter"> 
           <option>Equal to</option> 
           <option>Contains</option> 
           <option>in between</option> 
           <option>Not equal to</option> 
           <option>Greater than</option> 
           <option>Less than</option> 
          </select> 
         </td> 
         <td> 
          <input class="form-control" type="text"> 
         </td> 
         </tr> 
         <!-- SIXTH COLUMN ROW --> 
        </tbody> 
        </table> 
        <a href="#">add filter</a> 
      </div> 
      <div class="modal-footer"> 
        <button id="applyButton" type="button" class="btn btn-primary">Apply Filters</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      </div> 
      </div> 
     </div> 
     </div> 
<br> 
<br> 
     <h1>Hello World</h1> 
     <div ui-grid="gridOptions" ui-grid-pagination ui-grid-exporter ui-grid-resize-columns ui-grid-selection ui-grid-move-columns ui-grid-edit ui-grid-pinning class="myGrid" ng-model="columnName"> 
     </div> 
    </body> 
</html>

// ANGULAR下面的代碼

var myApp = angular.module("myApp.bootstrap",["ngAnimate", 
"ui.bootstrap", "ui.grid", "ui.grid.moveColumns", "ui.grid.edit", 
"ui.grid.selection", "ui.grid.resizeColumns", "ui.grid.exporter", 
"ui.grid.pagination", "ui.grid.pinning", "angularjs-dropdown-multiselect"]); 

myApp.controller('mainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) { 

    $scope.example1model = []; 
    $scope.example1data = [{ 
     id: 1, label: "Cox"},{ 
     id: 2, label: "Lorraine"},{ 
     id: 4, label: "Nancy"},{ 
     id: 5, label: "Laura"},{ 
     id: 6, label: "Ana"},{ 
     id: 7, label: "Feli"},{ 
     id: 8, label: "Victoria"},{ 
     id: 9, label: "Relu"},{ 
     id: 10, label: "Cristi"},{ 
     id: 11, label: "Jacob"},{ 
     id: 12, label: "Mike"},{ 
     id: 13, label: "Minodoa"},{ 
     id: 14, label: "Daciana"},{ 
     id: 15, label: "Utu"},{ 
     id: 16, label: "Kyle"} 
     ]; 

    $scope.example1settings = { 
     scrollableHeight: '300px', 
     scrollable: true, 
     enableSearch: true, 
     checkBoxes: true 
    }; 
    $scope.gridOptions = { 
     enableFiltering: true, 
     enableFullRowSelection: true, 
     enableSelectAll: true, 
     enableGridMenu: true, 
     paginationPageSizes: [25,45,65], 
     paginationPageSize: 45, 
     enableSorting: true, 
     enableHorizontalScrollbar: 1, 
     columnDefs: [ 
      {field: 'firstName', minWidth: 250, headerCellClass: 'blue', 
       filterHeaderTemplate:'<div class="ui-grid-filter-container"><div ng-dropdown-multiselect="" options="grid.appScope.example1data" selected-model="grid.appScope.example1model" checkboxes="true" extra-settings="grid.appScope.example1settings"></div></div>'}, 
      {field: 'lastName', minWidth: 250, headerCellClass: 'blue'}, 
      {field: 'company', minWidth: 250, headerCellClass: 'blue'}, 
      {field: 'employed', minWidth: 250, headerCellClass: 'blue'}, 
      {field: 'gender', minWidth: 250, headerCellClass: 'blue', 
        filter: { 
        term: '1', 
        type: uiGridConstants.filter.SELECT, 
        selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }] 
      }, 
      cellFilter: 'mapGender'}, 
      {field: 'country', minWidth: 250, headerCellClass: 'blue'}, 
      {field: 'dob', minWidth: 250, headerCellClass: 'blue'}, 
      {field: 'age', minWidth: 250, headerCellClass: 'blue'} 
     ], 
    }; 




/*=========GRID OPTION========*/ 
    $scope.gridOptions.multiSelect = true; 
/*=========GRID OPTION=========*/ 

    $scope.myData = [ 
     { 
      "firstName": "Cox", 
      "lastName": "Carney", 
      "company": "Enormo", 
      "employed": true, 
      "gender": "male", 
      "country": "USA", 
      "dob": "08/14/1992", 
      "age": "25" 
     }, 


$scope.gridOptions.data = $scope.myData; 

    $scope.myData.forEach(function addDates(row, index){ 
     row.gender = row.gender==='male' ? '1' : '2'; 
     }); 

}]) 

myApp.filter('mapGender', function() { 
    var genderHash = { 
    1: 'male', 
    2: 'female' 
    }; 

    return function(input) { 
    if (!input){ 
     return ''; 
    } else { 
     return genderHash[input]; 
    } 
    }; 
});

來源

2017-07-25 Ciprian Micula

+0

請張貼您的代碼！ –

+0

感謝您的迴應！我已經發布了我的Angular Code，請讓我知道是否需要額外補充。另外，我的Plunker提供了我的完整應用程序。 –

回答

0

你的意思是要篩選支票多個 '最前一頁名' 選項行？

我能想到的一件事是你可以自己做過濾器。 你篩選網格數據每次你選中/取消選中複選框選項，過濾後，你重新分配數據回到$ scope.myData

來源

2017-07-27 08:09:14

+0

感謝@ huan feng的迴應。是的，我想通過我的網格從下拉菜單中選擇什麼進行過濾。當你的意思是「你自己做過濾器」你的意思是創建一個自定義過濾器？ –

+0

我的意思是你操縱數據，你自己的邏輯，不依賴於UI網格， –

0

我相信這下面的鏈接將是非常有用的，你的代碼優化以及:)

Custom Filters - Single selection and Multi selection

來源

2017-07-27 10:22:14 GOK

+0

謝謝@GOK 我已經花了很多時間在UI網格網站和「自定義過濾器」部分，但是，我很難理解如何實現這個邏輯來挖掘。他們正在使用一個Modal和一個過濾器按鈕，這正是我想要搞砸我的。如果我可以更清楚地瞭解如何在沒有Modal及其自定義模板的情況下將相同的方法實施到我的網格，那麼自定義指令和過濾器按鈕將非常棒！ –

相關問題

 相關問題