将 ng-options 初始化为模型值答案

【问题标题】：Initialize ng-options to model value将 ng-options 初始化为模型值
【发布时间】：2017-01-08 13:56:14
【问题描述】：

我需要使用范围中的一些选项预填充<select> 元素，并希望将 whos 值绑定为最初选择的模型。

问题是没有选择模型值，而是创建并选择了一个空白元素。

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>

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

【问题讨论】：

它对我有用：$scope.myfruit = '1'
啊是的。那行得通。我想我必须将我的模型转换为字符串

标签： javascript html angularjs ng-options angularjs-ng-options

【解决方案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>

【讨论】：