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

Question

Как я могу сгенерировать элемент select с параметрами и значением по умолчанию в качестве «выбрано»?

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

$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

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

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

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

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>