Как фильтровать данные по диапазону дат в angularjs?

Я новичок в angularjs, и я не смог найти ПОЛНОЕ решение для фильтрации данных с выбором диапазона дат в угловом формате. Следующий код - это то, что я сделал, проведя 2 дня для поиска. Я хочу фильтровать следующие данные на основе их даты выпуска с помощью выбора диапазона дат.Как фильтровать данные по диапазону дат в angularjs?

HTML:

<!DOCTYPE HTML> 
    <html ng-app="example"> 
     <head lang="en"> 
      <meta charset="utf-8"> 
      <title>Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

      <script src="js/jquery-1.11.3.min.js"></script> 
      <script src="js/angular.js"></script> 
      <script src="js/moment.min.js"></script> 
      <script src="js/daterangepicker.js"></script> 
      <script src="js/angular-daterangepicker.min.js"></script> 
      <script src="js/bootstrap.min.js"></script> 

      <script src="app/app.js"></script> 

      <link href="css/bootstrap.min.css" rel="stylesheet"> 
      <link href="css/daterangepicker.css" rel="stylesheet"> 
     </head> 
     <body ng-controller="mainController as vm" > 
      <br><br> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="panel panel-primary"> 
          <div class="panel-heading"> 
           <h3>Product List</h3> 
          </div> 
          <div class="row"> 
           <br> 
           <div class="col-lg-3 text-right"> 
            <h4>Filter by date :</h4> 
           </div> 
           <div class="col-lg-6"> 
            <input date-range-picker name="daterange3" 
              class="form-control date-picker" type="text" 
              ng-model="date" options="opts" clearable="true" required/> 
           </div> 
          </div> 
          <div class="panel-body"> 
           <table class="table table-responsive"> 
            <thead> 
             <tr> 
              <th>Product</th> 
              <th>Code</th> 
              <th>Availabel</th> 
              <th>Price</th> 
             </tr> 
            </thead> 
            <tbody> 
             <tr ng-repeat="product in vm.products"> 
              <td>{{product.productName}}</td> 
              <td>{{product.productCode}}</td> 
              <td>{{product.releaseDate | date }}</td> 
              <td>{{product.price | currency}}</td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </body> 
    </html>

App.js

(function(){ 
    "use strict"; 
    angular 
     .module("example",["daterangepicker"]) 
     .controller("mainController",["$scope",mainController]); 


    function mainController($scope) 
    { 
     var vm = this; 

     vm.products = [ 
      { 
       "productId": 1, 
       "productName": "Leaf Rake", 
       "productCode": "GDN-0011", 
       "releaseDate": "2015-12-15T22:00:00.000Z", 
       "description": "Leaf rake with 48-inch wooden handle.", 
       "cost": 9.00, 
       "price": 19.95, 
       "category": "garden", 
       "tags": ["leaf", "tool"], 
      }, 
      { 
       "productId": 2, 
       "productName": "Garden Cart", 
       "productCode": "GDN-0023", 
       "releaseDate": "2015-12-16T22:00:00.000Z", 
       "description": "15 gallon capacity rolling garden cart", 
       "cost": 20.00, 
       "price": 32.99, 
       "category": "garden", 
       "tags": ["barrow", "cart", "wheelbarrow"], 
      }, 
      { 
       "productId": 5, 
       "productName": "Hammer", 
       "productCode": "TBX-0048", 
       "releaseDate": "2015-12-17T22:00:00.000Z", 
       "description": "Curved claw steel hammer", 
       "cost": 1.00, 
       "price": 8.99, 
       "category": "toolbox", 
       "tags": ["tool"], 
      }, 
      { 
       "productId": 8, 
       "productName": "Saw", 
       "productCode": "TBX-0022", 
       "releaseDate": "2015-12-18T22:00:00.000Z", 
       "description": "15-inch steel blade hand saw", 
       "cost": 6.95, 
       "price": 11.55, 
       "category": "garden", 
       "tags": ["garden", "mower"], 
      }, 
      { 
       "productId": 10, 
       "productName": "Video Game Controller", 
       "productCode": "GMG-0042", 
       "releaseDate": "2015-12-19T22:00:00.000Z", 
       "description": "Standard two-button video game controller", 
       "cost": 2.22, 
       "price": 35.95, 
       "category": "gaming", 
       "tags": ["gaming", "controller", "video game"], 
      } 
     ]; 
     $scope.date={ 
      startDate: moment().subtract(1, "days"), 
      endDate: moment() 
     }; 
     $scope.date2={ 
      startDate: moment().subtract(1, "days"), 
      endDate: moment() 
     }; 
     $scope.opts={ 
      ranges: { 
       'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
       'Last 30 Days': [moment().subtract(29, 'days'), moment()] 
      } 
     }; 
     $scope.setStartDate = function() { 
      vm.date.startDate = moment().subtract(4, "days"); 
     }; 
     $scope.setRange = function() { 
      vm.date = { 
       startDate: moment().subtract(5, "days"), 
       endDate: moment() 
      }; 
     }; 
     $scope.$watch('date', function(newDate) { 
      console.log('New date set: ', newDate); 
     }, false); 
    } 
}());

Спасибо вам, ребята ...

источник

2015-12-22 MOSH

В угловой, вы можете оператор трубопровода пользователю цепи операции. Как Belows,

<tr ng-repeat="product in vm.products | filter:date as results">

Полный текст документа см https://docs.angularjs.org/api/ng/directive/ngRepeat

источник

2015-12-22 12:50:47 user5698801

Благодарю вас за ответ, но я думаю, вы не поняли, чего я хочу. нет проблемы с ng-repeat. мне нужно другое – MOSH

Извините. Другой подход - это фильтрация результата в вашем контроллере. Поскольку вы уже видите переменную «date», вы можете вручную изменять результат вручную, когда переменная «date» изменяется внутри '$ watch'. такие как: 'vm.product = _.filter (vm.product, function (prod) {prod.releaseDate = date})'. – user5698801

Я была такая же проблема с входами и это было мое решение:

В HTML я использую два дата входа

 <div class="col-md-3 form-group"> 
      <input type="date" class="form-control" ng-model="from"> 
     </div> 
     <div class="col-md-3 form-group"> 
      <input type="date" class="form-control" ng-model="to"> 
     </div>

В приложениях:

app.filter("dateFilter", function() { 
     return function datefilter(items, from, to) { 
     var result = []; 
     angular.forEach(items, function(value){ 
      if (Date.parse(value.date) > Date.parse(from) && Date.parse(to) > Date.parse(value.date)) { 
       result.push(value); 
      } 
     }); 
     return result; 
     }; 
    });

В контроллере я поставил входы в прошлом месяце:

$scope.from = new Date(); 
    $scope.from.setMonth($scope.from.getMonth()-1); 
    $scope.to = new Date();

И в нг-повторить

 <tr ng-repeat="item in items | dateFilter:from:to"> 
      <td>{{item.name}}</td> 
      <td>{{item.date}}</td> 
     </tr>

Это работает для меня, я надеюсь быть полезным.

источник

2016-12-28 17:30:50

Как фильтровать данные по диапазону дат в angularjs?

ответ

Смежные вопросы