AngularJS - 從工廠讀JSON，使用效果

Question

新角度和堅持的東西，應該是很容易...

我有幾個資源：

.factory('RSVPRes', function ($resource) { 
    return { 
    RSVP: $resource("../reservations/:id.json", {id:'@id'}, {'update': {method:'PUT'}, 'remove': {method: 'DELETE', headers: {'Content-Type': 'application/json'}}}), 
    Meals: $resource('../meals.json'), 
    UserInvites: $resource('../userinvite.json') 
    }; 
}) 

Meals.json：

[{"id":1,"name":"Chicken","description":"Chicken Yum!","created_at":"2013-12-11T22:37:28.994Z","updated_at":"2013-12-11T22:37:28.994Z","event_id":1,"event":{"name":"Wedding"}},{"id":2,"name":"Steak","description":"9oz","created_at":"2013-12-11T22:37:29.004Z","updated_at":"2013-12-11T22:37:29.004Z","event_id":2,"event":{"name":"Rehersal"}},{"id":3,"name":"Veggie","description":"Vegan","created_at":"2013-12-11T22:37:29.008Z","updated_at":"2013-12-11T22:37:29.008Z","event_id":3,"event":{"name":"Stag"}}] 

UserInvites.json：

[{"id":18,"created_at":"2013-12-11T23:00:18.684Z","updated_at":"2013-12-11T23:00:18.684Z","event_id":1,"registry_id":1,"user_id":9,"total_in_party":2}] 

數據似乎被格式化爲相同。這裏都很好。

在我的控制器

.controller('RSVPCtrl', function RSVPController($scope, RSVPRes, $state, $stateParams) { 

    //GET INVITATION(S) 
    RSVPRes.UserInvites.query().$promise.then(function(response){ 
    $scope.invitation = response.data; 
    //BUILD SELECT LIST FOR MEALS 
    $scope.meals = RSVPRes.Meals.query(); 

    //EDIT 
    if ($scope.rsvpId) { 
     $scope.rsvp = RSVPRes.RSVP.get({id: $scope.rsvpId}, function() { 
     // $scope.selectedUser = $scope.invite.user_id; 
     // $scope.selectedEvent = $scope.invite.event_id; 
     // $scope.selectedRegistry = $scope.invite.registry_id; 
     // $scope.selectedTotalInParty = $scope.invite.total_in_party; 
     }); 
    } 
    //NEW 
    else { 
     //INITIALIZE EMPTY GUESTS 
     $scope.guests = []; 
     for (var i = 0; i < $scope.invitation.total_in_party; i++) { 
     $scope.guests[i] = { 
      first_name: '', 
      last_name: '', 
      meal: 1, 
      rsvp: 0 
     }; 
     } 
    } 
    }); 

    $scope.submit = function() { 
    for (var i = 0; i < $scope.guests.length; i++){ 
     $scope.rsvp = new RSVPRes.RSVP(); 
     $scope.rsvp.first_name = $scope.guests[i].first_name; 
     $scope.rsvp.last_name = $scope.guests[i].last_name; 
     $scope.rsvp.meal_id = $scope.guests[i].meal; 
     $scope.rsvp.rsvp = $scope.guests[i].rsvp; 
     $scope.rsvp.$save(); 
    } 
    $state.transitionTo('rsvps'); 
    }; 
}) 

EDITED現在檢查我的response.data我得到我的信息，但是我的$ scope.invitation仍然是不確定的...

任何幫助，非常感謝！

Answer 1

我認爲您在撥號reponse中撥打$resource與response撥打$http GET調用令人困惑。您應該只在資源的回調中使用response而不是resource.data。就像這樣：

//GET INVITATION(S) 
    RSVPRes.UserInvites.query().$promise.then(function(response){ 
    $scope.invitation = response; 
    //BUILD SELECT LIST FOR MEALS 
    $scope.meals = RSVPRes.Meals.query(); 

    //EDIT 
    if ($scope.rsvpId) { 
     /* $scope.rsvp = RSVPRes.RSVP.get({id: $scope.rsvpId}, function() { 
     // $scope.selectedUser = $scope.invite.user_id; 
     // $scope.selectedEvent = $scope.invite.event_id; 
     // $scope.selectedRegistry = $scope.invite.registry_id; 
     // $scope.selectedTotalInParty = $scope.invite.total_in_party; 
     });*/ 
    } 
    //NEW 
    else { 
     //INITIALIZE EMPTY GUESTS 
     $scope.guests = []; 
     for (var i = 0; i < $scope.invitation.total_in_party; i++) { 
     $scope.guests[i] = { 
      first_name: '', 
      last_name: '', 
      meal: 1, 
      rsvp: 0 
     }; 
     } 
    } 
    }); 

從docs：

$承諾：創建 這種情況下或收集原始服務器交互的承諾。

成功後，承諾將使用相同資源實例或 集合對象解決，並使用來自服務器的數據更新。這使得在$ routeProvider.when（）的resolve部分中使用 很容易，以便延遲查看 呈現，直到加載資源。

失敗時，承諾將通過http響應對象 解決，但不包含資源屬性。

因此，在成功的情況下，resource的響應是從$http呼叫不同。

工作例如：http://plnkr.co/edit/k7rMLJmQpbwWJMcfqcvl?p=preview

Answer 2

看起來你response.data將是一個數組，這意味着[$ scope.invitation]更好名爲[$ scope.invitations]，爲你設置（可能）不止一個。而且這種多重邀請的可能性表明，您設置用於構建空的訪客對象的For循環並不完全正確。也許嘗試這個...

for (var i = 0; i < $scope.invitation.length; i++){ 
    $scope.guests[i] = []; 
    for (var j=0; j < $scope.guests[i].total_in_party; j++) { 
     $scope.guests[i].total_in_party[j] = { 
      first_name: '', 
      last_name: '', 
      meal: 1, 
      rsvp: 0 
     }; 
     } 
    } 
}