AngularJs - assigning and redefining variables without controller, breaking a loop

Question

Preface: I am total rookie in this area.

Problem: I need to loop over a variable and stop looping at a certain point in time.

Tried solutions without success:

calling ng_init several times with the same variable - but this is on global scope and only the last assignment is visible;
tried to put in some "break" out of the loop;
tried with JS
tried with controller

Here is the code:

{{donePrint=0;\"\"}}
<td ng-repeat=\"hour in whours\">
  {{ donePrint }}
  <h5 ng-if=\"((itemValue('Weather_OWM_ObservationTime') | date: 'd') != (itemValue('Weather_OWM_DateTime_h' + hour) | date: 'd')) && (donePrint == 0)\">{{ donePrint=1;\"\" }}{{ donePrint }}{{ itemValue('Weather_OWM_DateTime_h' + hour) | date: 'EEE' }}</h5>
</td>

The idea of doing {{donePrint=0;\"\"}} came from here: Set angular scope variable in markup

What I am trying to achieve is initializing donePrint = 0 and after the first positive ng-if evaluation setting donePrint = 1;

The above code does not stop printing the <h5> headers. Instead the 0 and 1 are alternating ... looks like that donePrint is somehow scoped?

And another version I tried:

<td ng-app=\"\" ng-repeat=\"hour in whours\">
      {{ initFirstPrint() }}
      xx-{{ firstprint }}-xx
      <h5 ng-if=\"((itemValue('Weather_OWM_ObservationTime') | date: 'd') != (itemValue('Weather_OWM_DateTime_h' + hour) | date: 'd')) && (firstprint == 0)\">{{ doneFirstPrint() }}yy-{{ firstprint }}-yy{{ itemValue('Weather_OWM_DateTime_h' + hour) | date: 'EEE' }}</h5>
    </td>

The controller:

(function () {
'use strict';
angular
    .module('app.widgets.owm', [])
    .controller('owm-forecast-3hx9', ['$rootScope', '$scope', 'OHService',
        function ($rootScope, $scope, OHService) {
            $scope.fhours = ['3','6','9','12','15','18','21','24','27'];
            $scope.whours = ['6','9','12','15','18','21','24','27'];
            $scope.initFirstPrint = function() { $scope.firstprint = 0;}
            $scope.doneFirstPrint = function() { $scope.firstprint = 1;}
        }
    ]);
})();

The above example works fine except that firstprint is always set to 1. i.e. the printouts of xx-{{ firstprint }}-xx and yy-{{ firstprint }}-yy are always 1. I was hoping that doneFirstPrint is evaluated only if the ng-if evaluates to true, but this seems not to be the case. Something in my understanding of AngularJs is still wrong ...

thx for your support!

score 0 · Answer 1 · answered Oct 19 '20 at 15:31

Found the solution myself - only had the {{ initFirstPrint() }} in the wrong position (stupid me ...). But that's now the solution to break out of a loop:

The HTML code:

{{ initFirstPrint() }}
<td ng-app=\"\" ng-repeat=\"hour in whours\">
   <h5 ng-if=\"((itemValue('Weather_OWM_ObservationTime') | date: 'd') != (itemValue('Weather_OWM_DateTime_h' + hour) | date: 'd')) && (firstprint == 0)\">{{ doneFirstPrint() }}{{ itemValue('Weather_OWM_DateTime_h' + hour) | date: 'EEE' }}</h5>
</td>

The controller code:

(function () {
'use strict';
angular
    .module('app.widgets.owm', [])
    .controller('owm-forecast-3hx9', ['$rootScope', '$scope', 'OHService',
        function ($rootScope, $scope, OHService) {
            $scope.fhours = ['3','6','9','12','15','18','21','24','27'];
            $scope.whours = ['6','9','12','15','18','21','24','27'];
            $scope.initFirstPrint = function() { $scope.firstprint = 0;}
            $scope.doneFirstPrint = function() { $scope.firstprint = 1;}
        }
    ]);
})();

AngularJs - assigning and redefining variables without controller, breaking a loop

1 Answers1