Динамический выбор с выбранным по умолчанию

Question

Как я могу сгенерировать элемент select с опциями и опцией по умолчанию, помеченной как 'selected'?

Например, мой массив опций:

    $scope.options = [
        {
            "value": 1,
            "label": "One",
            "selected": true
        },
        {
            "value": 2,
            "label": "Two"
        },
        {
            "value": 3,
            "label": "Three"
        }
    ];

И угловой HTML:

<select name="">
    <option ng-repeat=" option in options " value="{{ option.value }}" ng-selected=" option.selected === true "> {{ option.label }}</option>
</select>

Итак, мне нужно сгенерировать что-то вроде этого:

<select name="">
    <option value="1" selected>One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Я хочу использовать ng-options,

Спасибо

Answer 1

Для такого рода сложных объектов лучше использовать ng-options. Таким образом, вы можете сделать это с помощью этого кода.

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

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

Answer 2

<select ng-model="selectedOpt" ng-options="option.value for option in options" ng-change="setOption(selectedOpt)">

В вашем контроллере вы должны установить модель, которая будет выбрана

$scope.selectedOpt = _.find($scope.options, function(o){return o.selected;})

function setOption(opt){
    opt.selected =true;
}

Answer 3

Чтобы иметь опцию по умолчанию, список должен быть заполнен первым, иначе вы получите ошибки или пустую опцию. Вы можете сделать это в вашем контроллере. Вот скрипка https://jsfiddle.net/rosstroha/3dcthfwh/3/

Пример контроллера:

var myApp = angular.module('myApp',[]);

angular.module('myApp').controller('MyCtrl', MyCtrl);

function MyCtrl($scope) {
    $scope.optionList = [
    {value: "val1"},
    {value: "val2"}
    ]
    $scope.selectedOption = $scope.optionList[0];
}

HTML:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <select ng-model="selectedOption" ng-options="option.value for option in optionList">
  </div>
</div>

При желании вы можете добавить еще один вариант, который всегда будет там, как это

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <select ng-model="selectedOption" ng-options="option.value for option in optionList">
    <option disabled value="">Select</option>
  </div>
</div>