如何在angularjs中设置选择框的默认值

IT技术 javascript angularjs
2021-02-17 17:21:01

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

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

6个回答

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

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
如果我想在不知道 ID 的情况下选择 version2 作为默认值怎么办
2021-04-22 17:21:01
带有多个可选项目的下拉菜单。弄清楚了。您添加了“多个”一词。
2021-05-02 17:21:01
@Robbo_UK 你能解释一下你的意思吗？泰
2021-05-05 17:21:01
除此之外，如果您正在构建一个编辑表单，其中模型可能已经或可能没有值，这很有效： ng-init="somethingHere = somethingHere || options[0]"
2021-05-05 17:21:01
如果它发生在别人，这只是工作的我，如果我说tracky by在ng-options。我的选项是具有 的资源集合_id，所以我的选择看起来像：<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options track by option._id"></select>
2021-05-09 17:21:01

你可以追加

track by version.id

到你的 ng-options。

绑定到对象时应使用跟踪依据。这允许选择框知道该值使用哪些属性。如果我们明确指出应该用于值/文本的属性，我们就不需要通过 id 添加轨道。更多信息可以在这里找到ozkary.com/2015/08/angularjs-ngoption-directive-simplified。 html
2021-04-25 17:21:01

它不会设置默认值，因为您的模型未绑定到 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/

是$scope.item.versionID = $scope.versions[2];不是overwritting在我的项目的value？我希望能够从versions基于item.versionID
2021-04-16 17:21:01

在搜索并尝试多个非工作选项以使我选择的默认选项工作后。我在以下位置找到了一个干净的解决方案：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>
其它你可能感兴趣的问题
上一篇用 JavaScript 匹配精确的字符串 下一篇Javascript：如何通过类名只获取一个元素？