Can we delay rendering in angularjs until all variables get required values from callbacks

Question

Update

1- IsShopToShowTerminated returns true which is expected but values doesn't reflects in the view.

I have shared angularjs code. There IsShopToShowTerminated is always undefined and doesn't depict the required value.

I think problem is because, it renders first and then value of the IsShopToShowTerminated is changed. After search I am getting more and more confused.

$scope.IsShopToShowTerminated = function(shopTerminationDate) {
  setTimeout(function() {
      debugger;
      if ($scope.IsTerminated($scope.viewCompany.TerminationDate)) {
        return true;
      } else {
        return $scope.IsTerminated(shopTerminationDate);
      }
    },
    0);
}

<td ng-init="isTerminatedValue = IsShopToShowTerminated(shop.TerminatinonDate)">
  {{isTerminatedValue}}
  <div ng-show="isTerminatedValue">
    <i class="fa fa-circle text-danger"></i>
    <small>Terminated</small>
  </div>

  <div ng-show="isTerminatedValue">
    <i class="fa fa-circle text-success"></i>
    <small>Active</small>
  </div>
</td>

@PetrAveryanov shop.TerminatinonDate is different for every shop in a loop. Do you suggest me to write ng-show="IsShopToShowTerminated(shop.TerminatinonDate)" on all occurances — Charlie, Jun 13 '18 at 11:21
I suggest you to write ng-show="smth.isTerminatedValue" and init, update this value in controller for each td — Petr Averyanov, Jun 13 '18 at 11:47
umm, it might sound silly but is your shop variable defined in controller like $scope.shop? — Asif Aminur Rashid, Jun 13 '18 at 13:35

score 0 · Answer 1 · answered Jun 13 '18 at 11:18

You can delay the rendering by adding a ngIf directive that would check the value of isTerminatedValue for undefined.

<td ng-init="isTerminatedValue = IsShopToShowTerminated(shop.TerminatinonDate)">
    <div ng-if="isTerminatedValue">
        {{isTerminatedValue}}
        <div ng-show="isTerminatedValue">
            <i class="fa fa-circle text-danger"></i>
            <small>Terminated</small>
        </div>
        <div ng-show="isTerminatedValue">
            <i class="fa fa-circle text-success"></i>
            <small>Active</small>
        </div>
    </div>  
</td>

Can we delay rendering in angularjs until all variables get required values from callbacks

Update

1 Answers1