AngularJs - ng-model в SELECT

Проблема:

У меня есть элемент SELECT на моей странице, который заполняется с помощью ng-repeat. Он также имеет ng-model, который имеет значение по умолчанию.

Когда я меняю значение, ng-model адаптируется, это нормально. Но в раскрывающемся списке показан пустой слот при запуске, где он должен иметь элемент с выбранным значением по умолчанию.

код

<div ng-app ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

С JS:

function myCtrl ($scope) {
    $scope.units = [
        {'id': 10, 'label': 'test1'},
        {'id': 27, 'label': 'test2'},
        {'id': 39, 'label': 'test3'},
    ]

        $scope.data = {
        'id': 1,
        'unit': 27
        }

};

Ответ 1

Вы можете использовать директиву ng-selected для элементов опции. Выражается, что если правка установит выбранное свойство.

В этом случае:

<option ng-selected="data.unit == item.id" 
        ng-repeat="item in units" 
        ng-value="item.id">{{item.label}}</option>

Демонстрационный

angular.module("app",[]).controller("myCtrl",function($scope) {
    $scope.units = [
        {'id': 10, 'label': 'test1'},
        {'id': 27, 'label': 'test2'},
        {'id': 39, 'label': 'test3'},
    ]

        $scope.data = {
        'id': 1,
        'unit': 27
        }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

Ответ 2

попробуйте следующий код:

В вашем контроллере:

 function myCtrl ($scope) {
      $scope.units = [
         {'id': 10, 'label': 'test1'},
         {'id': 27, 'label': 'test2'},
         {'id': 39, 'label': 'test3'},
      ];

   $scope.data= $scope.units[0]; // Set by default the value "test1"
 };

На вашей странице:

 <select ng-model="data" ng-options="opt as opt.label for opt in units ">
                </select>

Рабочий скрипт

Ответ 3

Вам не нужно определять теги параметров, вы можете сделать это, используя директиву ngOptions: https://docs.angularjs.org/api/ng/directive/ngOptions

<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select>

Ответ 4

Однако, ngOptions предоставляет некоторые преимущества, такие как сокращение памяти и увеличение скорости, не создавая новую область для каждого повторяющегося экземпляра. angular docs

Альтернативное решение - это использование директивы ng-init. Вы можете указать функцию, которая будет инициализировать ваши данные по умолчанию.

$scope.init = function(){
            angular.forEach($scope.units, function(item){
                if(item.id === $scope.data.unit){
                    $scope.data.unit = item;
                }
            });
        }

См. jsfiddle

Ответ 5

Вы также можете поместить элемент со значением по умолчанию, выбранным из ng-repeat, как показано ниже:

<div ng-app="app" ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
        <option value="yourDefaultValue">Default one</option>
        <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

и не забывайте атрибут value, если оставить его пустым, у вас будет такая же проблема.

Ответ 6

Выбор значения по умолчанию должен быть одним из его значений в списке. Чтобы загрузить значение по умолчанию со значением, вы можете использовать ng-options. В контроллере должна быть задана переменная области видимости, и эта переменная назначается как ng-model в теге HTML select.

Посмотрите этот плункер для любых ссылок:

http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview