将 ng-options 初始化为模型值

Question

我需要使用范围中的一些选项预填充一个 <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>

初始化时如何获取要选择的模型中表示的值？

Answer 1

你的选项值是一个字符串

这应该有效。

$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="angular.js@1.4.x" 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>

将 ng-options 初始化为模型值

Initialize ng-options to model value

html

javascript

angularjs

ng-options

angularjs-ng-options