CODEWITHSUNDEEP
javascriptjqueryangularjs
Aarmora
Aarmora

Reputation: 1153

Javascript functions not executing as expected

I'm trying to disable some input boxes while a loop is run and then enable it after it is finished. I would like to do this with angularjs. I set a scope variable to true before the loop starts and then to false when it completes.

When doing this, nothing is disabled during the loop. It's like it's not digesting the function until after the loop completes when it's set to false anyway.

I've tried using jquery as well and it reacted in the same way.

HTML

<input class="form-control" type="text" ng-model="lineToChange.QtyOrd" ng-disabled="disableLinePartial"  />

JS

   $scope.updateFreight = function (firstLineIndex) {
        //jQuery method acts the same
        //$("input[ng-disabled='disableLinePartial']").attr("disabled");

        $scope.disableLinePartial = true;

        angular.forEach($scope.data.SalesOrder.Lines, function (e, i) {
            //great functions here
        });
        $scope.disableLinePartial = false;
    };

Am I missing something with how JS parses? What's a better way to do this?

Upvotes: 0

Views: 66

Answers (1)

Viele
Viele

Reputation: 2336

Angular update the HTML on a loop: digestion cycles they call it. The change you made on $scope is not reflected in HTML while the updateFreight() function is not yet returned.

You can:

1) first $scope.disableLinePartial = true

2)

 $timeout(function() {
       // do your loop here

       $scope.disableLinePartial = false;
 });

The $timeout will allow the $scope change to apply, and only do the loop after at least one digest cycle.

You may also want to read about $scope.$applyAsync() and $scope.$evalAsync()

see: http://blog.bguiz.com/post/60397801810/digest-cycles-in-single-page-apps/

Upvotes: 1

Related Questions