current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm building a web app using Yeoman Angular-fullstack. I'm confused about how to update my $scope variables so that once a change is made, the results are automatically displayed on the html page without a refresh.

HTML 

<h1 class="page-header">Drugs:</h1>
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        <div ng-repeat="current in alldrugs">
                <p>
                <a href="/edit={{current._id}}"> <button class="btn btn-default" type="button">{{current.name}}</button></a>
                <a ng-click="delete(current)"><button class="btn btn-default" type="button">delete</button></a>
              </p>   
        </div>
    </div>
  </div>

Controller.js

'use strict';

angular.module('firstApp')
  .controller('MainCtrl', function ($scope, $http) {
    $scope.alldrugs = [];

    $http.get('/api/drugs').success(function(alldrugs) {
      $scope.alldrugs = alldrugs;
    });

    $scope.delete = function(thing) {
      $http.delete('/api/drugs/' + thing._id);
      $http.get('/api/drugs').success(function(alldrugs) {
        $scope.alldrugs = alldrugs;
      });
    };
  });

When $scope.delete is called, the item is deleted, however the page does not reflect the changes until I refresh the page. I'm thinking it has to do with the scope of the http callback function. Any help would be appreciated, thanks.

share|improve this question
    
you can use splice but your backend should be updating the list. not sure if there is error on backend. try chaining your delete and get –  maddog May 11 at 23:56
    
At least put $http.get('/api/drugs') in the delete callback, on the safe side. –  ABOS May 12 at 0:02
    
The code is almost straight from the github project, so I'm pretty sure it has to do with front end. Unfortunately chaining the delete and get didn't help. What's odd is that it's deleting successfully - the item gets updated immediately in the db and I can print the changes out in console. Nothing reflected in the html though –  Troy Griffiths May 12 at 0:05

1 Answer 1

up vote 1 down vote accepted

The problem is both the $http.delete and $http.get is called asynchronously.

When the $http.get is called, the $http.delete hasn't been finished yet. You have to ensure that the get is called AFTER the delete.

This code will work, although it is not an elegant solution:

$scope.delete = function(thing) {
  $http.delete('/api/drugs/' + thing._id).success(function(){
        //The get will be called AFTER the delete
        $http.get('/api/drugs').success(function(alldrugs) {
           $scope.alldrugs = alldrugs;
        });
  });
};
share|improve this answer
    
This code worked correctly. Do you think nesting this functions like this would affect performance? The deletes aren't as fast as I would like them to be, but maybe that's just the nature of using ng-repeat. Thanks so much! –  Troy Griffiths May 12 at 1:50
1  
Well from the UI you cannot do better but it is too bad to do two queries to the server, the performances would be better if the delete would return you alldrugs so you don't need to query it again. –  floribon May 12 at 1:53
    
@TroyGriffiths: The problem with nesting functions isn't performance, but the readability of the code (It's called "callback hell", just imagine that you have 5,6 functions nesting). You can google "angular js promise chaining" to learn more about how to solve it. –  Huy Hoang Pham May 12 at 1:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.