选择字段中的默认值

Question

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

我尝试了多种解决方案： AngularJS-在ng-repeat内的select上设置默认值以及如何在Angular.js的选择框中设置默认选项

没有任何运气。

我的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则可以将文本替换为所需的变量，例如$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>