Angular refresh list after post using Django-Rest-Framework - django

Question

I've been looking on the forum how to update a list of items after the post using a server. The available examples show how to update the list but in memory.
This is my current code:
$http.get('job/').
success(function(data, status, headers, config) {
$scope.jobs = data;
}).
error(function(data, status, headers, config) {
console.log('Error', status);
});
$scope.save = function(job) {
$http.post('job/', job)
.success(function(data) {
$scope.jobs.push(data); // here i trying update the list in view
}).
error(function(data, status, headers, config) {
console.log('Error', status);
});
};
// HTML List
<tr ng-repeat="job in jobs">
{% verbatim %}
<td> {{ job.name }}</td>
<td>{{ job.description }}</td>
{% endverbatim %}
<td><a ng-click="edit(job.id)" class="btn btn-small btn-primary">edit</a></td>
<td><a ng-click="delete(job.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>
// HTML form
<div class="span6" ng-controller="JobCtrl">
<h5>Create a New Job</h5>
<form class="form-inline">
<div class="form-group block-level">
<input type="text" class="form-control" name="name" ng-model="job.name" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="description" ng-model="job.description" placeholder="Description">
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="save(job)">Add Job</button>
</div>
</form>
</div>
Thanks!

Answer 1

Solved using Observer.
myApp.service('JobService', function($http) {
var observerCallbacks = [];
// register the observer's callback in our callback list.
this.registerObserverCallback = function(callback){
observerCallbacks.push(callback);
};
// function to notify our observers and call the callback they registered with
var notifyObservers = function(){
angular.forEach(observerCallbacks, function(callback){
callback();
});
};
this.list = function() {
return $http.get('job/').
success(function(data) {
return data;
});
};
this.add = function(job) {
return $http.post('job/', job).success(function(data, status, headers, config) {
notifyObservers();
});
};
});
myApp.controller('JobCtrl', function ($scope, $http, $location, JobService) {
var getList = function() {
JobService.list().then(function(jobs){
$scope.jobs = jobs.data;
});
};
JobService.registerObserverCallback(getList);
getList();
$scope.save = function(job) {
JobService.add(job).success(function(data) {
$scope.job = '';
console.log('success!');
});
};
});

Answer 2

Here is the working solution (without BE communication). I think your code is fine, because it's working here, but I think you miss table tag around tr and td
http://jsfiddle.net/U3pVM/5031/
<table>
<tr ng-repeat="job in jobs">
<td> {{ job.name }}</td>
<td>{{ job.description }}</td>
<td><a ng-click="edit(job.id)" class="btn btn-small btn-primary">edit</a></td>
<td><a ng-click="delete(job.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>
</table>
You don't have to do any $scope.$apply, because you are already working within angular scope (ng-click and $http backend request are that)