CODEWITHSUNDEEP
javascriptangularjs
Sourabh Dev
Sourabh Dev

Reputation: 743

Angular not updating template on scope change

I am trying to update my template when the date in the input box changes.

My inputbox html is:

<div class="col-md-4 pull-right">
    <input type="text" id="id_date" class="form-control" ng-model="date" ng-change="sendPost()" value="{{ date }}"/>
</div>

My table template is:

<tr>
    <td style="font-weight: bold">term</td>
    <td ng-repeat="block in blocks">{{ data[block]['term'] }}</td>
    <td>{{ total['term'] }}</td>
</tr>

Finally my controller code is:

$scope.blocks = ['A', 'B', 'C'];
$scope.data = {'A': {'term': 0, 'term2': 7}, 'B': {'term': 2, 'term2': 3}, 'C': {'term': 5, 'term2': 14}};
$scope.total = {'term': 50, 'term2': 70};
$scope.date = "2016-01-01";

$scope.sendPost = function() {
    //console.log("working");
    var post_data = {"date": $scope.date};

    $http.post("/web_api", post_data).success(function (post_data, status) {
        $scope.data = post_data.data;
        $scope.total = post_data.total;
        console.log($scope.data);
        console.log($scope.total);
    }).error(function(response) {
        //console.log(response);
          $scope.error = 'ERROR';
      });
};

The console log is returning the required objects on the post request.

Upvotes: 3

Views: 316

Answers (4)

maleeb
maleeb

Reputation: 920

Your $http promises are different. Check https://docs.angularjs.org/api/ng/service/$http

Try this:

$http
.post('/web_api', post_data)
.then(function(response) {
    // success

    $scope.data = post_data.data;
    $scope.total = post_data.total;
    console.log($scope.data);
    console.log($scope.total);
}, function(response) {
    // error

    //console.log(response);
    $scope.error = 'ERROR';
})
.finally(function() {
    // finally.. like for disable loader ?! 
});

Upvotes: 0

ippi
ippi

Reputation: 10177

.success and .error are deprecated but still works. However, they give a raw data response.

You are trying to use response.data but there is no such thing.

// This is the old way. It still works, but you get a raw data response.
$http.post("/web_api", post_data).success(function (post_data, status) {
    $scope.data = post_data;  // <-- Fixed!
    $scope.total = post_data.total; // <-- There is no such thing.
    console.log($scope.data);
    console.log($scope.total);
}).error(function(response) {
    //console.log(response);
      $scope.error = 'ERROR';
  });

Better yet, use the new way:

$http.post(...).then( onSuccess, onError );

In onSuccess you can use $scope.data = post_data.data;

$http.post(...).then(function(post_data){
    $scope.data = post_data.data;
});

Other than that your code works fine. I tried it out thoroughly.

https://docs.angularjs.org/api/ng/service/$http#deprecation-notice

Upvotes: 0

Alex Stoicuta
Alex Stoicuta

Reputation: 902

Try wrapping your scope assignment block in a $timeout, this will send the operation to the end of the que. Like this:

$http.post("/web_api", post_data).success(function (post_data, status) { $timeout(function(){ $scope.data = post_data.data; $scope.total = post_data.total; console.log($scope.data); console.log($scope.total); }); }).error(function(response) { //console.log(response); $scope.error = 'ERROR'; });

Upvotes: 0

Pawan B
Pawan B

Reputation: 4623

Whenever you do some form of operation outside of angularjs, you need to let angular know to update itself.

try adding a $scope.$apply(); after 

$scope.data = post_data.data;
$scope.total = post_data.total;

in your post request , it might work.

check more on $scope.$apply()

Upvotes: 1

Related Questions