Angular js中的日期(字符串）过滤器不起作用

Date(string) filter in Angular js not working

本文关键字：字符串 过滤器 不起作用 日期 js Angular      更新时间：2023-09-26

我正在尝试学习一些Angular，并试图为表中的一系列日期（格式化为字符串）创建一个过滤器。

我试过了，但不起作用。Angular没有给我任何错误。只是它不起作用。以防万一，过滤器在另一个文件中，并注入到模块中。

非常感谢你的帮助！

var testApp = angular.module('testApp', ['filters']);
testApp.controller('dateCtrl', function($scope) {
  $scope.tableValue = [{
    "date": "2005 JAN",
    "values": "98.7"
  }, {
    "date": "2005 FEB",
    "values": "98.9"
  }, {
    "date": "2005 MAR",
    "values": "99.3"
  }, {
    "date": "2005 APR",
    "values": "99.7"
  }, {
    "date": "2005 MAY",
    "values": "100"
  }, {
    "date": "2005 JUN",
    "values": "100"
  }, {
    "date": "2005 JUL",
    "values": "100.1"
  }, {
    "date": "2005 AUG",
    "values": "100.4"
  }, {
    "date": "2005 SEP",
    "values": "100.5"
  }, {
    "date": "2005 OCT",
    "values": "100.7"
  }, {
    "date": "2005 NOV",
    "values": "100.7"
  }, {
    "date": "2005 DEC",
    "values": "101"
  }, {
    "date": "2006 JAN",
    "values": "100.6"
  }, {
    "date": "2006 FEB",
    "values": "100.9"
  }, {
    "date": "2006 MAR",
    "values": "101.1"
  }, {
    "date": "2006 APR",
    "values": "101.6"
  }, {
    "date": "2006 MAY",
    "values": "102.2"
  }, {
    "date": "2006 JUN",
    "values": "102.4"
  }, {
    "date": "2006 JUL",
    "values": "102.4"
  }, {
    "date": "2006 AUG",
    "values": "102.8"
  }, {
    "date": "2006 SEP",
    "values": "102.9"
  }, {
    "date": "2006 OCT",
    "values": "103.1"
  }, {
    "date": "2006 NOV",
    "values": "103.3"
  }, {
    "date": "2006 DEC",
    "values": "103.9"
  }];
});
(function() {
  angular.module('filters', [])
    .filter('rangeDate', rangeDate);
  function rangeDate() {
    return function(input, minValue, maxValue) {
      var results = [];
      var item;
      var value;
      for (var i = 0; i < input.length; i++) {
        item = input[i];
        value = item.date;
        if (minValue && maxValue) {
          if (value >= minValue && value <= maxValue) {
            results.push(item);
          }
        } else if (minValue) {
          if (value >= minValue) {
            results.push(item);
          }
        } else if (maxValue) {
          if (value <= maxValue) {
            results.push(item);
          }
        } else {
          results.push(item);
        }
      }
      return results;
    };
  }
})();
<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <script data-require="angular.js@*" data-semver="1.2.1" src="//code.angularjs.org/1.2.1/angular.js"></script>
  <script src="script.js"></script>
  <script src="filters.js"></script>
</head>
<body ng:controller="dateCtrl">
  <fieldset>
    <legend>From</legend>
    <select ng-model="tableValueFrom" ng-options="data.date for data in tableValue">
      <option value="2000"></option>
    </select>
    <legend>From</legend>
    <select ng-model="tableValueTo" ng-options="data.date for data in tableValue">
      <option value="2000"></option>
    </select>
  </fieldset>
  <table>
    <thead>
      <tr>
        <th>
          <a href="">Period</a>
        </th>
        <th>
          <a href="">Value</a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="data in tableValue | rangeDate:tableValueFrom:tableValueTo">
        <th>{{data.date}}</th>
        <td>{{data.values}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

好的，这里有两个问题。

#1

您正在处理筛选器中的对象：minValue和maxValue。

例如，您的minValue是：

 Object { date="2005 FEB", values="98.9", $$hashKey="005"}

因此，您需要与minValue.date进行比较，而不仅仅是minValue:

...
} else if (minValue) {
    if (value >= minValue.date) {
        results.push(item);
    }
} else if ...

#2

此更改不足以实现您想要的内容，因为您正在比较字符串
您需要将这些日期字符串转换为日期。

对此，这里有很多问题。或者，您可以查看Moment.js或其angular指令：https://github.com/urish/angular-moment.

相关文章：