使用angularjs恢复默认下拉值

Question

虽然我有这个工作，但它的工作方式似乎不合适。 我有一个显示团队列表的下拉列表（DDL）。 顶部和默认条目是“Select Team ...”。 虽然我的DDL与模型相关联，但“选择团队......”不应该成为其中的一部分，因为“选择团队......”对域模型没有意义。

当用户单击“添加新”时，表单将清除，所有DDL应恢复为其默认值。

以下是相关的控制器功能：

scope.addUser = function() {
  resetToNewUser();
  $scope.profileVisible = true;
  $scope.oneAtATime = true;
  $scope.accordionStatus = { isFirstOpen: true, isFirstDisabled: false };
}

function resetToNewUser() {
  $scope.selectedUser.NtId = "";
  $scope.selectedUser.UserId = -1;
  $scope.selectedUser.IsActive = true;
  $scope.selectedUser.FirstName = "";
  $scope.selectedUser.LastName = "";
  $scope.selectedUser.JobTitle = "";
  $scope.selectedUser.Email = "";
  $scope.selectedUser.SecondaryEmail = "";
  $scope.selectedUser.PhoneNumber = "";
  for(var i = 0; i < $scope.roleList.length; i++) {
    if($scope.roleList[i].RoleSystemName.trim() === "BLU") {
      $scope.selectedUser.Role = $scope.roleList[i];
    }
  }
  $scope.selectedUser.SupervisorId = null;
  //HACK BELOW//
  document.getElementById('selTeam').selectedIndex = 0; // <-- This works, but feels like a hack.
  $scope.selectedUser.IsRep = false;
  for(var i = 0; i < $scope.signingAuthorityList.length; i++) {
    if($scope.signingAuthorityList[i].SigningAuthoritySystemName === "SME") {
      $scope.selectedUser.SigningAuthority = $scope.signingAuthorityList[i];
    }
  }
  $scope.selectedUser.IsOutOfOfficeEnabled = false;
  $scope.selectedUser.OutOfOfficeStartDate = null;
  $scope.selectedUser.OutOfOfficeEndDate = null;
  $scope.selectedUser.OutOfOfficeAppointedRepId = null;
}

以下是模板中DDL的定义方式：

<div class="form-group">
  <label for="" class="control-label col-sm-2 required">Team</label>
  <div class="col-sm-10">
    <select class="form-control" id="selTeam"
            ng-model="selectedUser.Team"
            ng-options="team as team.TeamName for team in teamList track by team.TeamId">
      <option value="">Select Team...</option>
    </select>
  </div>
</div>

有一个更好的方法吗？

Answer 1

您可以随时删除用户选择占位符选项的功能，对吧？ 像这样的东西：

<option value="" disabled selected hidden>Select Team...</option>

Answer 2

你的html部分看起来不错，但我认为在js方面你做了很多逻辑。 如果在服务器上添加新选项会怎样？ 最好从后端获取新用户的状态，使用select和其他小部件对其进行自定义，并在提交之前保留它。 在伪代码上它看起来像

$scope.addUser = function() {
   //create empty user on the scope
   $scope.selectedUser = {};
   //get the new user state from the backend
   UserService.resetToNewUser($scope.selectedUser);
   //setup view options
   $scope.accordionStatus = {isFirstOpen: true, isFirstDisabled: false}
};

app.service('UserService', function(){
    this.resetToNewUser = function(user){
        $http({
            method: 'GET',
            url: '/default_user/'
        }).then(function successCallback(response) {
            user = response;
        );
    };           
});