2013-12-10 109 views
0

第一個項目與AngularJS一起工作,我有點卡住使用選擇列表將默認值設置爲新的第一個選項,或者如果它的編輯選擇值。AngularJS - 選擇,設置編輯/新的默認值

我有一個有兩個選擇列表的表單。請注意,我認爲我在我的ng選項標籤中是錯誤的。

invite.tpl.html

<select ng-model="selectedUser" ng-options="user.id as user.user_name for user in users"></select> 
<select ng-model="selectedEvent" ng-options="event.id as event.name for event in events"></select> 

控制器,該控制器獲取/職位JSON。

invite.js

.controller('InviteCtrl', function InviteController($scope, InviteRes, $state, $stateParams) { 
    $scope.inviteId = parseInt($stateParams.inviteId, 10); 
    $scope.users = InviteRes.Users.query(); 
    $scope.events = InviteRes.Events.query(); 

    //EDIT (HAVE ID) - SET SELECTS TO THE USER/EVENT 
    if ($scope.inviteId) { 
    $scope.invite = InviteRes.Invites.get({id: $scope.inviteId}); 
    $scope.selectedUser = $scope.invite.user_id; 
    $scope.selectedEvent = $scope.invite.event_id; 
    } 
    //NEW (NO ID) - SET DEFAULT OPTIONS TO FIRST USER/EVENT 
    else { 
    $scope.selectedUser = $scope.users[0]; 
    $scope.selectedEvent = $scope.events[0]; 
    $scope.invite = new InviteRes.Invites(); 
    } 

功能進行保存。

$scope.submit = function() { 
    $scope.invite.user_id = $scope.selectedUser; 
    $scope.invite.event_id = $scope.selectedEvent; 
    //IF ID - UPDATE ELSE NEW 
    if ($scope.inviteId) { 
     $scope.invite.$update(function(response) { 
     $state.transitionTo('invites'); 
     }, function(error) { 
     $scope.error = error.data; 
     }); 
    } 
    else { 
     $scope.invite.$save(function(response) { 
     $state.transitionTo('invites'); 
     }, function(error) { 
     $scope.error = error.data; 
     }); 
    } 
    }; 

並有得到這些資源

.factory('InviteRes', function ($resource) { 
    return { 
    Invites: $resource("../invites/:id.json", {id:'@id'}, {'update': {method:'PUT'}, 'remove': {method: 'DELETE', headers: {'Content-Type': 'application/json'}}}), 
    Users: $resource('../users.json'), 
    Events: $resource('../events.json'), 
    }; 
}) 

我環顧四周,發現有些文章解釋如何做到這一點,但一切我已經試過了無論是給我的問題在任何設置的值,或保存表格。

回答

1

資源API不會立即返回 - 看到docs以下語句:

意識到調用$資源對象的方法 立即返回一個空引用是很重要的

難道這只是因爲你試圖在值可用之前分配值?

你能不能改變你的代碼來讀取類似:

if ($scope.inviteId) { 
    $scope.invite = InviteRes.Invites.get({id: $scope.inviteId}, function() { 
     $scope.selectedUser = $scope.invite.user_id; 
     $scope.selectedEvent = $scope.invite.event_id; 
    }); 
} 

在選擇指令而言,我傾向於使用對象,而不是值,例如

<select ng-model="selectedUser" ng-options="user.user_name for user in users"></select> 
// in controller: 
$scope.selectedUser = $scope.users[1]; 
+0

哇 - 非常感謝你修復它 - 很好知道前進! – OHope

+0

沒問題! :-) – natwallbank