所以我有像这样的角度代码
<select class="form-control" ng-model="ctrl.selectedProvider">
<option value="">Please select a provider</option>
<option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
{{provider.description}}
</option>
</select>
数据就像这样
providers = [{
id: 1,
description: provider1
},{
id: 2,
description: provider2
}]
如果ctrl.providers中只有一个元素,我想将select标记的默认值设置为此提供者。否则,我想保留它&#34;请选择提供商&#34;并让用户选择他想要的提供者。我用Google搜索并发现了ng-init,但我认为它对我的情况没用。有任何想法吗?感谢
答案 0 :(得分:0)
使用ng-options
创建<option>
代码并检查数据长度以指定模型(如果适用)
angular.module('app', [])
.controller('MainCtrl', function() {
this.providers = [{
id: 2,
description: 'provider2'
}];
if (this.providers.length === 1) {
this.selectedProvider = this.providers[0]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<div ng-app="app" ng-controller="MainCtrl as ctrl">
<select class="form-control"
ng-model="ctrl.selectedProvider"
ng-options="o.id as o.description for o in ctrl.providers track by o.id">
<option value="">Please select a provider</option>
</select>
</div>
答案 1 :(得分:0)
我认为你所拥有的东西会起作用,只需稍微调整你的代码:(下面的例子)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var ctrl = this;
// Uncomment to see result
//ctrl.selectedProvider = null;
//ctrl.selectedProvider = "";
ctrl.selectedProvider = 1;
//ctrl.selectedProvider = 2;
ctrl.providers = [{
id: 1,
description: "provider1"
},{
id: 2,
description: "provider2"
}];
});
&#13;
<!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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<select class="form-control" ng-model="ctrl.selectedProvider">
<option value="">Please select a provider</option>
<option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
{{provider.description}}
</option>
</select>
</body>
</html>
&#13;