我需要使用范围中的一些选项预先填充<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>
如何在初始化时获取模型中表示的值?
答案 0 :(得分: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>