角度js过滤器工作但有错误

时间:2018-03-16 21:52:56

标签: javascript angularjs filter

Angular js过滤器工作正常但投掷误差



var app = angular.module('NGapp', []);
app.filter('altDate', altDate);
app.controller('MainCtrl', MainCtrl)

function MainCtrl($scope) {
  $scope.data = {
    'listProductCost': [{
      'data': 1
    }, {
      'data': 23
    }, {
      'data': 234
    }, ]
  }
}

function altDate(_) {
  return function(value) {
    console.log(value)
    if (!value || value.length === 0) {

      return [];
    } else {
      var f = []
      angular.forEach(value, function(data) {
        f.push(data['data']);
      })
      var s = []
      s.push({
        'min': _.min(f),
        'max': _.max(f)
      })
      return s;
    }

    //return s;
  };
}
app.factory('_', LodashFactory);

/** @ngInject */
function LodashFactory($window) {
  return $window._;
}

<!DOCTYPE html>
<html ng-app="NGapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>

  <link rel="stylesheet" href="style.css" />
  <script data-require="lodash.js@4.17.4" data-semver="4.17.4" src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>

  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <md-card-content layout="row" layout-align="none" ng-repeat="datas in data.listProductCost  |  altDate ">
    <div class="dark" flex="30">HO Cost</div>
    <div>
      <span>{{datas.min}}</span> % to <span>{{datas.max}}</span> %
    </div>
  </md-card-content>
</body>

</html>
&#13;
&#13;
&#13;

这是我的工作代码与angularjs过滤器。过滤器工作正常,但我在控制台中得到itteration错误 目的过滤器仅打印折扣的最小值和最大值。任何人都可以解决问题或给我一个想法,以提前解决此问题

1 个答案:

答案 0 :(得分:0)

我看到你使用lodash。为什么不使用_.minBy()而不是_.min()?

这样您可以将 altDate 功能缩减为

altDate(_){
  return function(value) {
    return {
       min:  _.minBy(value, function(i) { return i.data }),
       max:  _.maxBy(value, function(i) { return i.data})
    }
  }
}