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以模拟值

1 个答案: