Як встановити параметр за замовчуванням у вікні вибору Angular.js

Я шукав Google і нічого не можу знайти на цьому.

У мене цей код.

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

З деякими подібними даними

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

І вихід є щось подібне.

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

Як можна встановити перший параметр у даних як значення за замовчуванням, щоб ви отримали такий результат.

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

Ви можете просто використовувати ng-init, як це

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

Якщо ви хочете переконатися, що ваше $scope.somethingHereзначення не перезаписується при ініціалізації перегляду, вам потрібно зв'язати ( somethingHere = somethingHere || options[0].value) значення у своєму ng-init таким чином:

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

Спробуйте це:

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

Javascript

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Плункер тут .

Якщо ви дійсно хочете встановити значення, яке буде прив’язане до моделі, то змініть ng-optionsатрибут на

ng-options="option.value as option.name for option in options"

і Javascript для

...
$scope.selectedOption = $scope.options[0].value;

Ще один Plunker тут, враховуючи вищесказане.

Лише одна відповідь Шріватса Харіша Венкататарамана згадувала, track byщо справді є рішенням цього!

Ось приклад разом із Plunker (посилання нижче) як використовувати track byу виборі ng-options :

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

Якщо selectedCityвін визначений у кутовій області, і він має idвластивість з тим же значенням, що і будь id-який cityу citiesсписку, він буде автоматично вибраний при завантаженні.

Ось Plunker для цього: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Докладнішу інформацію див. У вихідній документації: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Я думаю, що після включення "track by", ви можете використовувати його в ng-опціях, щоб отримати те, що хотіли, як-от нижче

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

Цей спосіб зробити це краще, тому що, коли ви хочете замінити список рядків на список об'єктів, ви просто зміните це на

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

де щось тут, звичайно, об’єкт із ім'ям властивостей та ідентифікатором, звичайно. Зауважте, "as" не використовується таким способом вираження ng-параметрів, тому що він встановить лише значення, і ви не зможете змінити його, коли ви використовуєте трек від

Використовується прийнята відповідь ng-init, але в документі сказано, щоб по можливості уникати ng-init.

Єдине правильне використання ngInit - це вилучення спеціальних властивостей ngRepeat, як це видно з демонстрації нижче. Крім цього випадку, вам слід використовувати контролери, а не ngInit для ініціалізації значень на області.

Ви також можете використовувати ng-repeat замість ng-optionsсвоїх варіантів. З ng-repeat, ви можете використовувати ng-selectedзі ng-repeatспеціальними властивостями. тобто $ index, $ akd, $ even, щоб зробити цю роботу без кодування.

$first є одним із спеціальних властивостей ng-повторів.

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

---------------------- EDIT ----------------
Хоча це працює, я б вважав за краще @ mik-t's відповідь, коли ви знаєте, яке значення вибрати, https://stackoverflow.com/a/29564802/454252 , який використовує track-byта ng-optionsне використовує ng-initабо ng-repeat.

Цю відповідь слід використовувати лише тоді, коли потрібно вибрати перший елемент, не знаючи, яке значення вибрати. наприклад, я використовую це для автоматичного завершення, яке вимагає постійно вибирати ПЕРШИЙ елемент.

Моїм рішенням цього було використання html для жорсткого коду моєї опції за замовчуванням. Так:

У HAML:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC & ON

В HTML:

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

Я хочу, щоб мій параметр за замовчуванням повертав усі значення з мого api, тому у мене є пусте значення. Також вибачте мій хамль. Я знаю, що це не є безпосередньо відповіддю на питання ОП, але люди знаходять це в Google. Сподіваюсь, це допомагає комусь іншому.

Використовуйте код нижче, щоб заповнити вибрану опцію з вашої моделі.

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

Залежно від того, скільки у вас є варіантів, ви можете помістити свої значення в масив і автоматично заповнити такі параметри, як цей

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

У моєму випадку мені потрібно було вставити початкове значення лише для того, щоб сказати користувачеві вибрати параметр, тому мені подобається код нижче:

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

Коли я спробував параметр зі значенням! = Порожнього рядка (null), параметр був замінений кутовим, але, коли ставиться такий варіант (з нульовим значенням), вибір виходить із цією опцією.

Вибачте за свою погану англійську мову, і я сподіваюся, що я допоможу в чомусь із цим.

Використання selectз ngOptionsі установки значення за замовчуванням:

Щоб отримати додаткові ngOptionsприклади використання, перегляньте документацію ngOptions .

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

Офіційна документація про HTML-SELECTелемент з кутовим прив'язкою даних.

Прив’язка selectдо нерядкового значення за допомогою ngModelаналізу / форматування:

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

Інший приклад:

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

Це працювало для мене.

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

У моєму випадку, оскільки за замовчуванням у формі змінюється залежно від випадку до випадку. Я додаю спеціальний атрибут у тег вибору.

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

в директивах я створив скрипт, який перевіряє значення і коли його кутовий заповнює, встановлює вибране значення з цим значенням.

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

})

щойно переклав це з кофесцену на льоту, принаймні, суть його правильна, якщо не дірка.

Це не найпростіший спосіб, але виконайте це, коли значення змінюється

У відповідь на відповідь Бена Леша має бути такий рядок

ng-init="somethingHere = somethingHere || options[0]" 

замість

ng-init="somethingHere = somethingHere || options[0].value" 

Це є,

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

Просто використовуйте ng-selected="true"наступне:

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

Я встановив би модель в контролері. Тоді вибір буде за замовчуванням до цього значення. Наприклад: html:

<select ng-options="..." ng-model="selectedItem">

Кутовий контролер (з використанням ресурсу):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});

Це працює для мене

ng-selected="true" 

Якщо ви використовуєте ng-optionsдля візуалізації, optionвибирається випадаюче значення, ніж значення, яке має ng-modal, вибрано за замовчуванням. Розглянемо приклад:

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

Отже, параметр, що має однакове значення list.keyі selectedItem, обраний за замовчуванням.

Мені знадобилася опція "Будь ласка, виберіть", щоб не вибрати її. Мені також потрібно було вміти умовно встановити вибраний за замовчуванням параметр.

Я домігся цього наступним спрощеним способом: JS-код: // Переверніть ці 2, щоб перевірити вибраний за замовчуванням або не вказаний за замовчуванням текст за замовчуванням // Виберіть, будь ласка, //$scope.defaultOption = 0; $ range.defaultOption = {ключ: '3', значення: 'Варіант 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML:

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>         

Я сподіваюся, що це допоможе комусь іншому, який має подібні вимоги.

"Виберіть, будь ласка" було здійснено завдяки відповіді Джоффрі Ауттьє тут .

Якщо у вас є якась річ, а не просто ініціювати частину дати, ви можете використовувати ng-init()її, оголосивши її у своєму контролері, і використовувати її у верхній частині свого HTML. Ця функція буде працювати як конструктор для вашого контролера, і ви можете ініціювати там свої змінні.

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

спробуйте це у своєму кутовому контролері ...

$ somethingHere = {name: 'Щось круто'};

Ви можете встановити значення, але ви використовуєте складний тип, і кутовий буде шукати ключ / значення для встановлення у вашому представленні даних.

І якщо це не працює, спробуйте це: ng-options = "option.value як option.name для параметра в параметрі track track by option.name"

Я думаю, що найпростіший спосіб

 ng-selected="$first"