我有以下形式的数据：
[
{
title: 'foo',
date: '2013-11-27'
},
{
title: 'foo1',
date: '2014-02-07'
},
{
title: 'foo2',
date: '2014-06-13'
},
{
title: 'foo3',
date: '2015-02-28'
},
{
title: 'foo4',
date: '2015-05-10'
},
]
使用Angular我想首先在dropdownlist中显示独特的年份。我如何创建一个用于在<option ng-repeat="item in items">上使用的过滤器，该过滤器使下拉列表包含2013、2014和2015，每年仅显示一次？
其次，当用户在下拉列表中选择2014年时，我只需要在那一年显示的项目，因此在此示例中仅" foo1"one_answers" foo2"。我该如何为DIV过滤？<div ng-repeat="item in items | filter: item.date == selectedyear></div>
首选本机解决方案。
jsfiddle我希望它如何寻找用户，如果用户选择了" 2014"：http：//jsfiddle.net/gthvidsten/k8hj45lt/
这是一种非常简单的方法。链接到小提琴：http：//jsfiddle.net/5dmjt/1298/
html：
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<select ng-model="selYear">
<option ng-repeat="year in years" >{{year}}</option>
</select>
<select ng-model="selDate">
<option ng-repeat="obj in data | filter:selectDatesByYear">{{obj.date}} - {{obj.title}}</option>
</select>
</div>
</div>
angularjs：
function ClickToEditCtrl($scope) {
$scope.data=[
{
title: 'foo',
date: '2013-11-27'
},
{
title: 'foo1',
date: '2014-02-07'
},
{
title: 'foo2',
date: '2014-06-13'
},
{
title: 'foo3',
date: '2015-02-28'
},
{
title: 'foo4',
date: '2015-05-10'
},
];
$scope.years = [];
$scope.selYear = "2013";
angular.forEach($scope.data, function(value, key) {
if (this.indexOf(value.date.substring(0,4)) == -1)
this.push(value.date.substring(0,4));
}, $scope.years);
$scope.selectDatesByYear = function (obj) {
if (obj.date.substring(0,4) == $scope.selYear) return true;
return false;
}
}
您必须创建一个自定义过滤器。
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.items =
[
{
title: 'foo',
date: '2013-11-27'
},
{
title: 'foo1',
date: '2014-02-07'
},
{
title: 'foo2',
date: '2014-06-13'
},
{
title: 'foo3',
date: '2015-02-28'
},
{
title: 'foo4',
date: '2015-05-10'
}
];
// check if a item is already in items
var isDuplicate = function(items, item) {
for(var i=0; i<items.length; i++) {
if(items[i] === item) return true;
}
return false;
};
// get all years from array
$scope.getYears = function(array) {
var years = [];
angular.forEach(array,function(value){
var y = parseInt(value.date.substr(0, 4));
if(!isDuplicate(years,y)) {
years.push(y);
}
});
return years;
};
});
app.filter('onlyYear', function() {
return function(items,selectedYear) {
// if no year selected, return all items
if(!angular.isNumber(selectedYear)) return items;
// populate array
var filtered = [];
angular.forEach(items, function(item) {
var year = item.date.substr(0, 4);
if(year == selectedYear){
filtered.push(item);
}
});
return filtered;
};
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-require="angular.js@1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-options="year for year in getYears(items)" ng-model="selectedyear"></select>
<div>selected year: {{selectedyear}}</div>
<ul>
<li ng-repeat="item in items | onlyYear:selectedyear">{{item.title}} ({{item.date}})</li>
</ul>
</body>
</html>
编辑：使用自定义过滤器（使用$filter('date')）
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope,$filter) {
$scope.items =
[
{
title: 'foo',
date: '2013-11-27'
},
{
title: 'foo1',
date: '2014-02-07'
},
{
title: 'foo2',
date: '2014-06-13'
},
{
title: 'foo3',
date: '2015-02-28'
},
{
title: 'foo4',
date: '2015-05-10'
}
];
// check if a item is already in items
var isDuplicate = function(items, item) {
for(var i=0; i<items.length; i++) {
if(items[i] === item) return true;
}
return false;
};
// get all years from array
$scope.getYears = function(array) {
var years = [];
angular.forEach(array,function(value){
var y = $filter('date')(value.date,'yyyy');
if(!isDuplicate(years,y)) {
years.push(y);
}
});
return years;
};
});
app.filter('onlyYear', function($filter) {
return function(items,selectedYear) {
// if no year selected, return all items
if(typeof selectedYear == 'undefined') return items;
selectedYear = parseInt(selectedYear);
// populate array
var filtered = [];
angular.forEach(items, function(item) {
var year = $filter('date')(item.date,'yyyy');
if(year == selectedYear){
filtered.push(item);
}
});
return filtered;
};
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-require="angular.js@1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-options="year for year in getYears(items)" ng-model="selectedyear"></select>
<div>selected year: {{selectedyear}}</div>
<ul>
<li ng-repeat="item in items | onlyYear:selectedyear">{{item.title}} ({{item.date}})</li>
</ul>
</body>
</html>