我想在ng-repeat中使用AngularJs过滤器过滤数据。
这是我的ng-repeat代码段
<tr ng-repeat="finance in finances | filter:trierParDate ">
<td>{{finance.created_at}}</td>
<td>{{finance.prix | numeraljs:'argent'}}</td>
<td>{{finance.grandtotal | numeraljs:'argent'}}</td>
</tr>
以下是按月过滤的按钮:
<div ng-click="trierParDate = {'created_at': '2015-03-12 22:43:07'}">Janvier</div>
<div ng-click="trierParDate = {'created_at': '2015-03-12 22:43:07'}">Février</div>
etc...
实际上,这些&#34;按钮&#34;返回一个条目,因为我只想测试它。现在我想知道如何按月过滤。
我想转换为:ng-click = {如果created_at属性在位置5到7(月份数据位置)包含03,则显示条目。}
答案 0 :(得分:1)
您可以创建过滤器功能,并根据所选/所需月份过滤结果。这是一个有效的例子:
http://plnkr.co/edit/OTTAqykqGsJFrFyJYOjD?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
Show results for
<select ng-model = "selectedMonth">
<option></option>
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
<ul>
<li ng-repeat="a in appointments | filter: selectedMonthFilter">id: {{a.id}}, label: {{a.label}}, created: {{a.created}}</li>
</ul>
</body>
</html>
的javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.appointments = [];
$scope.selectedMonth = "";
$scope.selectedMonthFilter = function(element) {
if(!$scope.selectedMonth) return true;
return element.created.getMonth() == $scope.selectedMonth;
}
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
}
for(var i=0; i<1000; i++) {
$scope.appointments.push({id: i, label: "Item number " + i, created: randomDate(new Date(2014, 0, 1), new Date())});
}
});