選擇字段中的默認值

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>