Инициализировать ng-options для значения модели

Мне нужно предварительно заполнить элемент <select> некоторыми параметрами из области видимости, и я хотел бы, чтобы тот, чье значение привязано к модели, был выбран изначально.

Проблема в том, что значение модели не выбирается, а вместо этого создается и выбирается пустой элемент.

Модель JSON

var fruits = {
    "0":"apple",
    "1":"pear",
    "2":"banana"
 }

Контроллер

$scope.items = fruits;
$scope.myfruit = 1; // also tried "1"

Разметка шаблона:

<select class='form-control' name="fruit" 
    ng-model="myfruit"              
    ng-options="key as val for (key, val) in items" >                       
</select>

Выпадающее меню отображается со всеми присутствующими значениями и обновляет модель ключами (как и предполагалось), но первый выбранный элемент — это пустой элемент.

Однако, как только опция выбрана, пустая опция исчезает.

Я также попытался написать разметку с использованием ng-repeat с идентичными результатами:

<select class='form-control' name="fruit" 
    ng-model="myfruit" >
    <option ng-repeat="(k, val) in items" value="{{k}}">{{val}}</option>                        
</select>

Как я могу получить значение, представленное в модели, которое будет выбрано при инициализации?


javascript html angularjs ng-options angularjs-ng-options
person yevg    schedule 08.01.2017    source источник
comment
У меня работает: $scope.myfruit = '1'   -  person Avnesh Shakya    schedule 08.01.2017
comment
о да. это сработало. Думаю, мне придется преобразовать мою модель в строку   -  person yevg    schedule 08.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

значение вашего параметра представляет собой строку

это должно работать.

$scope.myfruit = "1";

Проверьте приведенный ниже рабочий пример

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

app.controller('MainCtrl', function($scope) {

  var fruits = {
    "0": "apple",
    "1": "pear",
    "2": "banana"
  }

  $scope.items = fruits;
  $scope.myfruit = "1"; 


});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <select class='form-control capitalize' name="cost" 
    ng-model="myfruit"              
    ng-options="key as val for (key, val) in items" >                       
    </select>
  
    
  </body>

</html>

person Deep    schedule 08.01.2017