Question

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

我已经尝试了this但它无效。 Angular不会给我任何错误。只是它不起作用。以防万一，过滤器位于不同的文件中并注入模块。

非常感谢你的帮助！

＆＃13;

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;
    };
  }
})();

＆＃13;

<!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>

＆＃13;

Answer 1

好的，你有两个问题。

＃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或其角度指令：https://github.com/urish/angular-moment。

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

1 个答案:

＃1

＃2