Default value in Select field

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.

where is baseBoards assigned? I think you might want to try $scope.boards = [{ id: false, name: "Choose Board" }]; — binariedMe, Mar 05 '19 at 03:22

score 0 · Answer 1 · answered Mar 05 '19 at 03:15

0

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.

answered Mar 05 '19 at 03:15

holydragon

6,158
6
39
62

If you are asking a user to try and check if it works, you might want to put this as comment instead I think. – binariedMe Mar 05 '19 at 03:24

Sagar Kulthe · Answer 2 · 2019-03-14T05:39:58.963

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>

Sorry for the lack of information, but boards is a larger list of boards that is retreived from trello, there is no way to add the "Choose List" option to the list without having it included in the set of boards, there is a $scope.boards defined — WorkingOnBeingBetter, Mar 13 '19 at 20:14

Default value in Select field

2 Answers2