Обновление до Angular 1.6 перерывы выберите выпадающий - PullRequest
Новая
       26

Обновление до Angular 1.6 перерывы выберите выпадающий

0 голосов
/ 04 июня 2018

У меня есть приложение, созданное с использованием Angular 1.5, где следующий код работает просто отлично: 

      <div class="select-wrapper">

        <select ng-model="myModel"
          ng-options="thing as thing for (thing, otherThing) in sortedThings">

          <option value="">MAKE SELECTION</option>

        </select>

        <i class="fa fa-angle-down" title="Select Arrow"></i>

      </div>

Однако, когда я обновился до Angular 1.6, этот код больше не показывает опцию по умолчанию в поле выбора (MAKEВЫБОР).

Почему это произошло и как это исправить?

РЕДАКТИРОВАТЬ: я хочу видеть, что при первой загрузке страницы в раскрывающемся списке должно быть уже выбрано «СДЕЛАТЬ ВЫБОР».

1 Ответ

0 голосов
/ 05 июня 2018

При установке модели на опцию по умолчанию важно использовать значение undefined.Установка модели в пустую строку "" не сработает. 

angular.module('defaultSelectValue', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     sortedThings: {
       a: 'fred',
       b: 'narf',
     },
     selectedOption: undefined //This sets the default value of the select in the ui
     };
  
    $scope.s2 = { 
       selectedOption: ""   //setting to empty string won't work
    }
 }]);
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="defaultSelectValue" ng-controller="ExampleController">
    <select
      ng-options="key as key for (key, value) in data.sortedThings"
      ng-model="data.selectedOption">
      <option value="">MAKE SELECTION</option>
    </select>
    <br>
    <tt>option = {{data.selectedOption}}</tt><br/>
    <hr>
      Empty string doesn't work<br>
    <select
          ng-options="key as key for (key, value) in data.sortedThings"
          ng-model="s2.selectedOption">
      <option value="">MAKE SELECTION</option>
    </select>
    <br>
    <tt>option = {{s2.selectedOption}}</tt>
</body>
...