问题描述
限时送ChatGPT账号..我想在 ng-repeat 中使用 AngularJs 过滤器过滤数据.
I want to filter data using AngularJs filter in a ng-repeat.
这是我的 ng-repeat 片段
Here is my ng-repeat snippet
<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>
这是我按月份过滤的按钮:
Here is my buttons to filter by months:
<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...
实际上,这些按钮"返回一个条目,因为我只是想对其进行测试.现在我想知道如何按月过滤.
Actually, these "buttons" returns a single entry as I just wanted to test it. Now I wonder how to filter by month.
我希望将其转换为:ng-click = {如果 created_at 属性在位置 5 到 7(月份数据位置)包含 03,则显示条目.}
I would like that translates to: ng-click = {if the created_at property contains 03 at position 5 to 7 (month data position), then show the entries.}
推荐答案
您可以创建过滤器功能,并根据选定/期望的月份过滤结果.这是一个工作示例:
You can create a filter function, and filter results based on a selected / desired month. Here's a working example:
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/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:
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())});
}
});
这篇关于如何使用过滤器在 AngularJs 中按月过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论