Javascript 如何在angularjs中按日期范围过滤数据？
我是angularjs的新手，在angularjs中找不到使用日期范围选择器过滤数据的完整解决方案。下面的代码是我花了2天时间搜索后所做的。 我想要的是使用日期范围选择器根据发布日期筛选以下数据 HTML:Javascript 如何在angularjs中按日期范围过滤数据？,javascript,angularjs,filter,daterangepicker,Javascript,Angularjs,Filter,Daterangepicker,我是angularjs的新手，在angularjs中找不到使用日期范围选择器过滤数据的完整解决方案。下面的代码是我花了2天时间搜索后所做的。 我想要的是使用日期范围选择器根据发布日期筛选以下数据 HTML: <!DOCTYPE HTML> <html ng-app="example"> <head lang="en"> <meta charset="utf-8"> <t
<!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>
谢谢大家…在angular中，您可以使用管道操作符来链接操作。如下文所述
<tr ng-repeat="product in vm.products | filter:date as results">
完整的文档请参考中的angular，您可以使用管道操作符来链接操作。如下文所述
<tr ng-repeat="product in vm.products | filter:date as results">
完整的文档请参考我对输入有相同的问题，这是我的解决方案： 在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>
$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>
{{item.name}
{{item.date}
这对我来说很有效，我希望能有所帮助。我对输入也有同样的问题，这是我的解决方案： 在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>
$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>
{{item.name}
{{item.date}
这对我很有用。谢谢你的回答，但我想你不明白我想要什么。ng repeat没有问题。我需要的是不同的担心。另一种方法是在控制器中过滤结果。由于您已经查看了“date”变量，因此每次在
$watchvm.product=..filter（vm.product，function（prod）{prod.releaseDate=date}）$watchvm.product=..filter（vm.product，函数（prod）{prod.releaseDate=date}）