我们可以使用angular js中的自定义过滤器过滤嵌套的json数据吗

Question

我是angular js的新手，并试图使用自定义过滤器过滤angular js中的嵌套json数据（基本上我想根据用户输入显示过去几天的日期）。 基本上我正在尝试使用自定义过滤器在json中过滤日期对象。我不确定是否可以使用当前代码过滤嵌套对象（如日期对象），或者我可能需要更改当前实现。

当日期为字符串格式时，我可以像这样正常工作，并且可以正常工作http://plnkr.co/edit/5IhJYSXvqa5nwd87y8kD?p=preview

但是，当我尝试嵌套json日期格式时，它不起作用，或者以json格式的其他读数时，我无法使其正常工作。 我正在尝试找到一种使用自定义过滤器过滤嵌套json对象（日期或数据中的其他参数）的方法。任何帮助将不胜感激。 这是http ://plnkr.co/edit/en36loBKQ2DAnOcbwe8v?p=preview`的插件链接

 var app = angular.module('tempfilter', []); app.controller('MainCtrl', function($scope) { $scope.sensordata = [{ id: 'id:1', name: 'Rob', "ValidationDate": { "$date": "2015-02-20 18:00:05-0400" }, "Temp": 42 app.filter('tempo', function() { return function(items, field, value) { var filtered = []; var newdate = new Date().setDate(new Date().getDate() - value); angular.forEach(items, function(item) { if (new Date(item[field]) > newdate) { filtered.push(item); } }); return filtered; }; }); 

 <body ng-controller="MainCtrl"> Number of days before today <input type="number" ng-model="filter.value"> <p id="demo">Showing data for last {{ filter.value }} days</p> Filtered list: <ul> <li ng-repeat="s in sensordata | tempo:'ValidationDate.$date':filter.value">{{s.id}} {{s.ValidationDate.$date|date}} {{s.name}} {{s.Temp}} </ul> </body> 

`

Answer 1

日期的类型为String ，最好在JavaScript中将其更改为timestamps或Date对象。

有一些示例代码：

<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
<span>{{1288323623006 | date:'medium'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
<span>{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}</span>:
<span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span><br>

Answer 2

发现我的问题已经存在了很长时间。 一个简单的更改是javascript将解决问题，并且可以使用轻松提取嵌套的json数据。 在以下示例中，符号为item.ValidationDate。$ date。

http://plnkr.co/edit/NEBYrQeaLX84sCSNDCzV?p=preview

 // Code goes here // Code goes here //http://stackoverflow.com/questions/18935889/difference-between-date-parse-and-gettime var app = angular.module('tempfilter', []); app.controller('MainCtrl', function($scope) { $scope.sensordata = [ {id:'id:1',name:'Rob',"ValidationDate": {"$date":"2015-04-12 18:00:05-0400"},"readings" : [ {"Temp" : 20 }]}, {id:'id:2',name:'Rob',"ValidationDate": {"$date":"2015-04-13 18:00:05-0400"},"readings" : [ {"Temp" : 25 }]}, {id:'id:3',name:'Rob',"ValidationDate": {"$date":"2015-04-11 18:00:05-0400"},"readings" : [ {"Temp" : 26 }]} ]; $scope.filter = { value:100}; }); app.filter('tempo', function() { return function( items, field, value) { var filtered = []; var newdate=new Date().setDate(new Date().getDate()-value); //var tempp=26-value; angular.forEach(items, function(item) { //if (new Date(item[field]) > newdate){ //new logic of accessing value by function //if (item.readings[0].Temp >tempp ){ if (new Date(item.ValidationDate.$date) >newdate ){ filtered.push(item); } }); return filtered; }; }); 

 <!DOCTYPE html> <html ng-app="tempfilter"> <head lang="en"> <meta charset="utf-8"> <title>DateFilter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> document.write('<base href="' + document.location + '" />'); </script> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> Number of days before today<input type="number" ng-model="filter.value"> <p id="demo">Showing data for last {{ filter.value }} days</p> Filtered list: <ul> <li ng-repeat="s in sensordata | tempo:'Date':filter.value">{{s.id}} {{s.ValidationDate.$date|date}} {{s.name}} {{s.readings[0].Temp}} </ul> Full List: <ul> <li ng-repeat="s in sensordata ">{{s.id}} {{s.ValidationDate.$date|date}} {{s.name}} {{s.readings[0].Temp}} </li> </ul> </body> </html>