0

由于 angularjs 不能与 ngResource 自定义 url 一起使用,我必须尝试使用​​ $http 来代替:

我的html是这样的:

//html
<tr ng-repeat="person in people">
  <td>{{person.name}}</td>
  <td><a ng-click="changeGender(person)">{{person.gender}}</a></td>
</tr>

我的想法是点击 html 中的锚点后,会向服务器发送一个请求并更新,然后将状态为 200 的状态发送回去并更新视图中的性别。我建立了一个服务,它看起来像:

//factory
app.factory('changeGenderFactory', function($http, $q){
  return {
    getResult: function(person) {
      var deferred = $q.defer();
      $http({method: 'POST', url: '/resources/people/' + person.id + '/gender'}).
      success(function(data, status, headers, config){
        deferred.resolve(data);
      }).
      error(function(data, status, headers, config){
        deferred.reject(status);       
      });
      return deferred.promise;
    }
  };
});

这是控制器:

//app
var app = angular.module('someApp', []);
//controller
app.controller('peopleCtrl', function($scope, ngResource, changeGenderFactory) {
  //skip how i get $scope.people...
  //$scope.people = ...(use ngResource)

  $scope.changeGender = function(person) {
    return changeGenderFactory.getResult(person);
  };
});

ajax 工作正常,但我猜我的控制器部分有问题,因为 html 根本没有更新。我应该怎么做才能在 html 中更新 ng-repeat 中的数据?谢谢你。

4

1 回答 1

1

最后我放弃使用 ngResource 并转而使用 $http 和 $q ,ngResource 并不完全适合这种情况。基本上这就是我解决问题的方法:

在 html 中:

{{changeGender(person, $index)}}

通过传递一个额外的参数 $index,我可以知道在这种情况下是哪个人。然后在控制器中:

$scope.changeGender = function(person, index) {
  //using $http, can move to service with $q, just for demo
  $http.post('someurl').success(function(data){
    $scope.people[index] = data;
  });
}

它可能看起来很笨拙,但它是另一种选择....

于 2013-07-03T04:12:25.850 回答