使用angularjs自定义过滤器返回2个值,并在UI上以不同方式显示它们

时间:2016-06-23 17:13:23

标签: javascript arrays angularjs json

我有一个以分钟格式存储时间的数组,我正在尝试将其更改为hr mm格式。例如:如果是0150,则应使用此自定义过滤器将其转换为2小时30分钟。  这是我的代码:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>



<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
    {{x | myFormat:hr}} hours {{x | myFormat:min}} mins
</li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x,hr,min) {

        var i, c, txt = "",hr,min;
        for (i = 0; i < x.length; i++) {
            c = x[i];

            txt = txt+ c;
        }
           hr=txt/60;  //hr
           min=txt%60; //mins 

           if(hr>12)
          {
            hr=hr-12;
          }

         return min,hr;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        '1350',
        '1200',
        '0060',
        '360',
        '0720',
        '1140',
        '960',
        '870',
        '330'

        ];
});
</script>


</body>
</html>

我想如何返回2个值,然后使用自定义过滤器的有效语法来正确显示它。 任何帮助表示赞赏, 谢谢。

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x,type) {

        var i, c, txt = "",hr,min;
        for (i = 0; i < x.length; i++) {
            c = x[i];

            txt = txt+ c;
        }
           hr=txt/60;  //hr
           min=txt%60; //mins 

           if(hr>12)
          {
            hr=hr-12;
          }
      if(type=='min'){
        return min;
      } else{
        return Math.floor(hr);
      }

         return min,hr;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        '1350',
        '1200',
        '0060',
        '360',
        '0720',
        '1140',
        '960',
        '870',
        '330'

        ];
});
&#13;
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
    {{x | myFormat:'hr'}} hours {{x | myFormat:'min'}} mins
</li>
</ul>
&#13;
&#13;
&#13;

JS中的所有函数只返回一件事(它可以是复杂的对象或数组)。在角度滤波器的情况下,它预期它们返回一个字符串。只需按照您希望的方式连接这两个值return min+":"+hr

再次阅读您的代码并看到您确实只想将参数传递给过滤器并让它有条件地返回两个值中的一个。那样做吧。请确保在过滤器使用情况中,您可以在“过滤器”周围添加引号。或者&#39; hr&#39;因此,他们不会被解析为表达式并根据范围进行评估。在你的过滤器函数中,它将获得一个输入,然后是参数。在您返回之前,您可以检查arg是否“最小化”。或者&#39; hr&#39;并返回适当的部分。