选择字段中的默认值

Question

I am confused about why I am getting this specific malfunction, I am unable to get a default value for my select dropdown list. My goal is to have "Choose Board" as the default but despite many trials, I have been unable to get this as the default value.

I have attempted a variety of solutions: AngularJS - Set default value on select inside a ng-repeat & How to have a default option in Angular.js select box

Without any luck.

My HTML Tags:

<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>

My JS controller code

//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);
            }
        });
    };

The result is a field being added and set as the default, in the above code the null field disappears after any of the others are selected.

any help is much appreciated.

Answer 1

Try

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

and in your Controller

$scope.form.boardInput = "Choose Board"

If it works then you can replace the text with your desired variable such as $scope.baseBoards[0].name .

Answer 2

Please check this updated answer. For now your trello.getBoards I have commented, once you add it in your code, uncomment it and comment var boards this variable.

 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>