CODEWITHSUNDEEP
javascriptangularjsweb
Arthur Kishinets
Arthur Kishinets

Reputation: 147

Angular $apply does not update the view

I have a form, when I submit it, it pushes some object to my array. Beneath that form I have a table that shows all items in that array. I want my table to update automatically (without refreshing the page) when new item pushed.

Submit button:

<button type="submit" class="btn btn-default" ng-click="updateTable()">Pay</button>

In my controller:

  $scope.updateTable = function() {
    setTimeout(function () {
      $scope.$apply();
      $scope.$digest();
    }, 0);
  };

However, it does not work. I tried different approaches like $watch service, but i`ve got the same result.

Table 

<div class="row paytable">
  <div class="col-xs-10 col-xs-offset-1">
    {{payments.length}}
    <table class="table table-hover ">
      <tr>
        <td>Id</td>
        <td>Amount</td>
        <td>Cause</td>
      </tr>
      <tr ng-repeat="item in payments">
        <td>{{item.id}}</td>
        <td>{{item.amount}}</td>
        <td>{{item.cause}}</td>
      </tr>
    </table>
  </div>
</div>

Controller

app.controller('mainController', [ 'user', '$rootScope', '$scope', 'payment', '$timeout', function(user, $rootScope, $scope, payment, $timeout) {

  user.getUsers();
  user.newUser();
  $rootScope.currentUser = user.currentUser();

  $scope.payments = payment.getPayments();
  $scope.newPayment = payment.newPayment;

  $scope.updateTable = function() {
    setTimeout(function () {
      console.log('apply ------------');
      $scope.$apply();
      $scope.$digest();
    }, 0);

  };

  $scope.showPayMessage = function() {
    console.log('im here');
    $scope.showSM = true;
    $timeout(function() {
      $scope.showSM = false;
    }, 2000);
  };
}]);

payment - my service for array manipulation.

Form

<div class="newpay row" >
  <div class=" col-xs-10 col-xs-offset-1">
    <h1>Hello, {{currentUser.name}}</h1>
    <h4 ng-show="showSM" class="bg-success">Payment confirmed</h4>
    <form name="inputform" ng-submit="newPayment(amount, cause); showPayMessage();">
      <div class="form-group">
        <label for="exampleInputEmail1">Amount</label>
        <input type="number" name="amount" ng-model="amount" class="form-control" id="exampleInputEmail1" placeholder="Amount" required>

      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Cause</label>
        <input type="text" name="cause" ng-model="cause" class="form-control" id="exampleInputPassword1" placeholder="Cause" required>

      </div>

      <button type="submit" class="btn btn-default" ng-click="updateTable()">Pay</button>
    </form>
  </div>
</div>
payments: {{payments.length}}
<payments-table payments="payments"></payments-table>

To display that table I created directive.

Upvotes: 2

Views: 140

Answers (1)

AranS
AranS

Reputation: 1891

$scope.$apply and $scope.$digest are better suited for working with 3rd party libraries or testing. In your case Angular is well aware to your changes. The thing is, your payments array, that resides in a service should be queried again after submitting a new item (unless you have a direct reference to the array, then no query should be made).

Like this:

View 

<form name="inputform" ng-submit="onSubmit()">

Controller

$scope.onSubmit = function() {
    newPayment($scope.newItemAmount, $scope.newItemCause); // Assuming they are properties in the controller
    showPayMessage();
    $scope.payments = payment.getPayments(); // getting the updated array
}

Upvotes: 3

Related Questions