选择字段中的默认值答案

【问题标题】：Default value in Select field选择字段中的默认值
【发布时间】：2019-07-26 10:45:29
【问题描述】：

我对为什么会出现这种特定故障感到困惑，我无法为我的选择下拉列表获取默认值。我的目标是将“选择板”作为默认值，但尽管经过多次试验，我还是无法将其作为默认值。

我尝试了多种解决方案：AngularJS - Set default value on select inside a ng-repeat & How to have a default option in Angular.js select box

没有运气。

我的 HTML 标签：

<select name="boardInput" class="form-control" 
        ng-required="true" 
        ng-init="form.boardInput = boards[0]" 
        ng-model="form.boardInput" 
        ng-options="board.name for board in boards">
</select>

我的 JS 控制器代码

//TRELLO CONTROLLER
$scope.baseBoards =[{
        id: false,
        name: "Choose Board"
    }];
$scope.getBoards = function() {
        trello.getBoards('me', function(error, boards){
            if(error){
                log("Could Not Get Boards: ", error);
            } else {
                log("found " + boards.length + " boards");
                $scope.boards = $scope.baseBoards.concat(boards);
            }
        });
    };

结果是一个字段被添加并设置为默认值，在上面的代码中，空字段在选择其他任何一个后消失。

非常感谢任何帮助。

【问题讨论】：

baseBoards 分配在哪里？我想你可能想试试 $scope.boards = [{ id: false, name: "Choose Board" }];

标签： javascript html angularjs select

【解决方案1】：

请检查这个更新的答案。现在你的trello.getBoards我已经评论了，一旦你在你的代码中添加它，取消它并评论var boards这个变量。

var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope) {
  $scope.boards = [];
  $scope.baseBoards = [{
    id: false,
    name: "Choose Board"
  }];
  $scope.getBoards = function() {
    /* trello.getBoards('me', function(error, boards) {
       if (error) {
         log("Could Not Get Boards: ", error);
       } else {
         log("found " + boards.length + " boards");
         $scope.boards = $scope.baseBoards.concat(boards);
       }
     }); */

    //You will get boards data from your trello.getBoards method but I dont have access it so declaring local variable.
    var boards = [{
      name: 'one'
    }, {
      name: 'two'
    }, {
      name: 'three'
    }]
    $scope.boards = $scope.baseBoards.concat(boards);


  };
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app='app' ng-controller='myController' ng-init="getBoards()">
  <select name="boardInput" class="form-control" ng-required="true" ng-init="form.boardInput = boards[0]" ng-model="form.boardInput" ng-options="board.name for board in boards">
  </select>
</div>

【讨论】：

抱歉信息不足，但看板是从 trello 中检索到的更大的看板列表，如果不将“选择列表”选项添加到列表中，则无法将其添加到一组板，定义了一个 $scope.boards

【解决方案2】：

试试

<select name="boardInput" class="form-control" 
        ng-required="true" 
        ng-model="form.boardInput" 
        ng-options="board.name for board in boards">
</select>

在你的控制器中

$scope.form.boardInput = "Choose Board"

如果可行，那么您可以将文本替换为所需的变量，例如 $scope.baseBoards[0].name。

【讨论】：

如果您要求用户尝试检查它是否有效，我认为您可能希望将此作为评论。