Question

我一直在论坛上查看如何使用服务器更新帖子后的项目列表。可用的示例显示如何更新列表但在内存中。这是我目前的代码：

$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>

谢谢！

Answer 1

这是工作解决方案（没有BE通信）。我认为你的代码很好，因为它在这里工作，但我认为你错过了tr和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>

你不必做任何$ scope。$ apply，因为你已经在角度范围内工作（ng-click和$ http后端请求就是这样）

Answer 2

使用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!');
        });
    };
});

使用Django-Rest-Framework发布后的角度刷新列表

2 个答案: