Question

我试图在Angular中制作文本格式化指令。

在我目前的应用程序中，我有很多地方需要以HH：MM：SS格式显示时间，数据库中的时间以秒为单位保存。所以我在想，也许指令在这里是正确的。例如：我希望在HH中呈现时间：MM：SS我只是将指令“showAsTime”添加到包含时间的元素中。

Q1 这里最好的方法是什么？

只显示部分代码：

<table>
    <tr data-ng-repeat="time in timeList">
        <td data-show-as-time>{{ time.rowTime }}</td> //time in seconds
    <tr>
</table>

问题是我没有得到该值，该指令首先执行，如果我“硬编码”一个值说：900代替{{time.rowTime}}我得到正确的演示文稿“00： 15:00" 。

Q2 在应用程序的一部分中，我有一个绑定到计数器的模型，如下所示。是否有可能使相同的指令在这里工作？

只显示部分代码：

<h1 data-ng-model="timeCounter" data-show-as-time>{{timeCounter}}</h1>

//timeCounter adds 1 to timeCounter every second (with a $interval in the controller).

时间计算如下：

time.js

app.factory('time',function(){

    var timeFactory = {};

    timeFactory.timeFromSeconds = function(seconds){
        var timeFromSeconds     
        var minutes = Math.floor(seconds/60);
        var hours = Math.floor(seconds/3600);

        if(hours > 0) minutes = minutes - hours * 60;

        seconds = seconds - hours * 3600 - minutes * 60;

        if(hours < 10) hours = "0" + hours;
        if(minutes < 10) minutes = "0" + minutes;
        if(seconds < 10) seconds = "0" + seconds;

        timeFromSeconds = hours +":"+minutes+":" + seconds;

        return timeFromSeconds;
    }

 return timeFactory;
 }

Answer 1

Angular中已有一个日期过滤器可以为您执行此操作。

点击此处的链接：https://docs.angularjs.org/api/ng/filter/date

Answer 2

除了其他答案（https://docs.angularjs.org/api/ng/filter/date）中说明的日期过滤器外，您还可以实施自定义过滤器以进一步格式化模型数据：

angular.filter('doSomething', function() {
    return function(input) {
        //do something on your input and return it
    }
  })

然后，在您的html中，您可以将过滤器调用为

{{model|doSomething}}

这可能是获得所需行为的最佳方式，而不是使用指令。

关于绑定值的角度指令

2 个答案: