Question

我对为什么出现此特定故障感到困惑，我无法为我的选择下拉列表获取默认值。我的目标是将“选择板”作为默认值，但是尽管进行了许多试验，但我仍无法将其作为默认值。

我尝试了多种解决方案：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);
            }
        });
    };

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

非常感谢您的帮助。

Answer 1

尝试

<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）替换文本。

Answer 2

请检查此更新的答案。现在，您对我的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>

选择字段中的默认值

2 个答案: