[英]How do I set default value of select box in angularjs
我有一个用于编辑对象的表单,但我无法在选择框中选择值。
我有一个表示要编辑的 json 数组,如下所示:
$scope.item = [{
"objectID": "76",
"versionID": "0",
"versionName": "CURRENT",
"objectName": "xyz",
}]
现在我同时从另一个 json 数组中填充一个选择框,如下所示:
$scope.versions = [
{
"id": "0",
"description": "CURRENT",
"name": "CURRENT"
},
{
"id": "114",
"description": "description of Version 2",
"name": "version2"
},
{
"id": "126",
"description": "description of Version 3",
"name": "version3"
},
{
"id": "149",
"description": "description of Version 4",
"name": "version4"
}]
在我的网页中,我正在创建选择框,如下所示:
Version: <select ng-model="item.versionID"
ng-selected="item.versionID"
ng-options="version.name for version in versions"
required>
选择框正在为我填充,但它应该选择与item
中的版本匹配的值。 我已经尝试过versionID
和versionName
,我什至尝试过设置ng-selected="0"
并且这甚至不起作用。
我已经在 SO、Angularjs 网站上查看过这里,并在谷歌上搜索并浏览了无数教程,但仍然存在问题。 我似乎看不出问题是什么所以非常感谢任何帮助
在这里添加了一个 JsFiddle
您可以像这样简单地使用ng-init
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
你可以追加
track by version.id
到你的 ng-options。
它不会设置默认值,因为您的模型未绑定到 id 或 name 属性,而是绑定到每个version
对象。 尝试将versionID
设置为对象之一,它应该可以工作,即$scope.item.versionID = $scope.versions[2];
如果要通过 id 属性进行设置,则需要添加select as
语法:
ng-options="version.id as version.name for version in versions"
在搜索并尝试多个非工作选项以使我选择的默认选项工作后。 我在以下位置找到了一个干净的解决方案: http : //www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/
<select class="ajg-stereo-fader-input-name ajg-select-left" ng-options="option.name for option in selectOptions" ng-model="inputLeft"></select>
<select class="ajg-stereo-fader-input-name ajg-select-right" ng-options="option.name for option in selectOptions" ng-model="inputRight"></select>
scope.inputLeft = scope.selectOptions[0];
scope.inputRight = scope.selectOptions[1];
根据文档select ,以下代码对我有用。
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
<select ng-model="selectedCar" ><option ng-repeat="car in cars " value="{{car.model}}">{{car.model}}</option></select>
<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = [{model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"},{model : "Volvo XC90", color : "black"}];
$scope.selectedCar=$scope.cars[0].model ;});
如果您甚至不想将 ng-model 初始化为静态值并且每个值都是 DB 驱动的,则可以通过以下方式完成。 Angular 比较评估值并填充下拉列表。
下面的 modelData.unitId 是从 DB 中检索的,并与单元 id 列表进行比较,该列表是与 db 分开的列表-
<select id="uomList" ng-init="modelData.unitId" ng-model="modelData.unitId" ng-options="unitOfMeasurement.id as unitOfMeasurement.unitName for unitOfMeasurement in unitOfMeasurements">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.