AngularJS-选择，设置编辑/新建的默认值

AngularJS - Select, set default values for Edit/New

本文关键字：新建 默认值 编辑 选择 设置 AngularJS-      更新时间：2024-07-01

我和AngularJS合作的第一个项目有点拘泥于使用选择列表将默认值设置为新的第一个选项，或者如果是编辑，则选择该值。

我有一张表格，上面有两个选择列表。注意，我想我的ng选项标签错了。

邀请.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'),
  };
})

我环顾四周，发现一些文章解释了如何做到这一点，但我所尝试的一切要么给我设置值，要么保存表单带来了问题。

资源API不会立即返回-请参阅文档中的以下语句：

重要的是要认识到调用$resource对象方法立即返回一个空的参考

这可能只是因为你试图在值可用之前分配它吗？

你能把你的代码改成这样吗：

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指令而言，我倾向于使用对象而不是值，例如

<select ng-model="selectedUser" ng-options="user.user_name for user in users"></select>
// in controller:
$scope.selectedUser = $scope.users[1];
相关文章：