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

【问题标题】：Can we filter nested json data using custom filter in angular js我们可以使用angular js中的自定义过滤器过滤嵌套的json数据吗
【发布时间】：2015-04-12 15:21:31
【问题描述】：

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

当日期是字符串格式并且它工作正常之前，我让它像这样工作 http://plnkr.co/edit/5IhJYSXvqa5nwd87y8kD?p=preview

但是当我尝试嵌套 json 日期格式时它不起作用或其他 json 格式的读数我无法使它工作。我正在尝试找出一种使用自定义过滤器过滤嵌套 json 对象（数据中的日期或其他参数）的方法。任何帮助将不胜感激。这是一个 plunker 链接 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>

【问题讨论】：

标签： javascript json angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

你的日期类型是String，你最好把它们改成时间戳或者JavaScript中的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>

【讨论】：

【解决方案2】：

发现我的问题已经存在很长时间了。一个简单的改变是 javascript 可以解决问题，并且可以使用 .像 item.ValidationDate.$date 这样的符号在 plunker 下面的例子中。

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>

【讨论】：