Значение по умолчанию в поле выбора

Question

Я не понимаю, почему у меня возникает эта конкретная неисправность, я не могу получить значение по умолчанию для моего выпадающего списка выбора.Моя цель - использовать «Выбор доски» по умолчанию, но, несмотря на многие испытания, я не смог получить это значение по умолчанию.

Я пытался использовать различные решения: AngularJS - установить значение по умолчанию для выбора внутри ng-repeat & Как использовать параметр по умолчанию в поле выбора 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

Пожалуйста, проверьте этот обновленный ответ.Пока ваш 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>

Answer 2

Попробуйте

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