1

I am working with Angular version 1.6.1. I have an event object array that is loaded into the dom using ng-repeat. An event has the following properties:

{
city: ""
hash: ""
timestamp: 1234578910
noCount: 1
unknownCount: 2
yesCount: 2
}

As you can see an event has a timestamp. This timestamp is transformed using a filter:

app.filter('dateFilter', [function () {
return function (v) {
    let operationDate = new Date(v);
    let day = 'Yesterday: ';
    if (new Date(v).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)) {
        day = 'Today: ';
    }
    let minutes = operationDate.getMinutes();
    return day + operationDate.getHours() + ':' + (minutes < 10 ? "0" : "") + minutes;
  };
 }
]);

Here my ng-repeat:

  <div ng-class="getHighlight(operation.timestamp)" style="margin-top: 10px;">
    <div class="row">
        <h3 class="col-md-6 col-xs-6">
            {{operation.city}}
        </h3>
        <div class="col-md-6 col-xs-6" style="text-align: right;">
            <h3>
                {{operation.timestamp | dateFilter}}
            </h3>
        </div>
    </div>
 .
 .
 .
 .
 </div>

I periodically get Data from an API and update the event-participants if they changed(every 5 seconds). The problem i got is that when a new day begins the filter doesn't update the prefix to: "Yesterday".

Is there a way to re-apply filters OR to force a reload of a specific DOM-Element?

  • 1
    show us your ng-repeat declaration and how you show this to the view. Also if possible provide a fiddle with real data to reproduce the problem (are you adding data every 5 seconds always ? or it might be that no data is being modified ? if so, it might be that filters are not triggered, data in your collection hasn't changed. Also show how you periodically add data (using $interval?) – Gonzalo.- Mar 22 '17 at 21:18
  • _if so, it might be that filters are not triggered, data in your collection hasn't changed_ I know it hasn't changed. The timestamp never changes. I want angular to re-apply the filter aanyways. – Philpp de Sombre Mar 23 '17 at 14:36
  • didn't mean timestamp to change, but the collection to change (for example adding a new item), if you feed with new data – Gonzalo.- Mar 23 '17 at 16:11
  • Adding a new element leads to a full dom update of ng-repeat. – Philpp de Sombre Mar 25 '17 at 13:26
  • And that does not give you your expected result ? That's how angular works – Gonzalo.- Mar 25 '17 at 15:29

1 Answers1

0

use $timeout instead of the setTimeout fiddle here demonstrating

another is $scope.$apply() which forces to rerender but timeout is safer

Community
  • 1
  • 1
Modar Na
  • 873
  • 7
  • 18