65

我有一个用于编辑对象的表单，但无法在选择框中选择值。

我有一个代表要编辑的 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

在这里添加了一个 JsFiddle

4

7 回答 7

125

您可以像这样简单地使用ng-init

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
于 2014-02-21T10:04:21.130 回答
31

你可以追加

track by version.id

到您的 ng 选项。

于 2014-03-31T16:28:41.763 回答
30

它没有设置默认值，因为您的模型没有绑定到 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://jsfiddle.net/LrhAQ/1/

于 2013-08-22T13:15:37.150 回答
-1

在搜索并尝试了多个非工作选项以使我选择的默认选项工作之后。我在以下位置找到了一个干净的解决方案： 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];
于 2015-03-26T23:58:39.590 回答
-1 
  <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 ;});
于 2016-06-02T09:12:51.787 回答
-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>
于 2015-09-21T00:15:00.277 回答
-3

如果您甚至不想将 ng-model 初始化为静态值并且每个值都是 DB 驱动的，则可以通过以下方式完成。Angular 比较评估值并填充下拉列表。

下面的 modelData.unitId 是从 DB 中检索的，并与单元 id 列表进行比较，单元 id 是与 db 不同的列表-

 <select id="uomList" ng-init="modelData.unitId"
                         ng-model="modelData.unitId" ng-options="unitOfMeasurement.id as unitOfMeasurement.unitName for unitOfMeasurement in unitOfMeasurements">

于 2015-09-10T18:06:05.083 回答