如何使用 ng-option 设置选择元素的默认值答案

【问题标题】：how to use ng-option to set default value of select element如何使用 ng-option 设置选择元素的默认值
【发布时间】：2013-06-26 20:08:02
【问题描述】：

我在这里看到了 Angular 选择指令的文档：http://docs.angularjs.org/api/ng.directive:select。我不知道如何设置默认值。这令人困惑：

选择作为数组中值的标签

这是对象：

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

html（工作）：

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

然后我尝试在 select 元素中添加一个 ng-option 属性以将prop.value 设置为默认选项（不起作用）。

ng-options="(prop.value) for v in prop.values"

我做错了什么？

【问题讨论】：

标签： angularjs

【解决方案1】：

所以假设对象在你的范围内：

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

工作 Plunkr：http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

【讨论】：

好的，我明白了！ ng-option 正在取代 <option ng-repeat="value in prop.values">{{value}}</option> 再次感谢
必须有一种更简单的方法来做到这一点，我发现这对于 Angular js 中的简单选择默认值来说非常复杂
ng-option 指令的语法有些复杂和混乱。我认为绑定对象的灵活性使它有点复杂。我试图记住这一点的方式是，每当我使用一个对象时，我都会明确指出要为选择控件的值/文本属性使用哪些属性。有关更多信息，请参阅：ozkary.com/2015/08/angularjs-ngoption-directive-simplified.html
如果你想在视图中构建一个选择而不写出选项并选择一个<select ng-model="limit" value="10" ng-options="v for v in [5,10,15,20,30,50]"></select>
@james Kleeh ..这里你正在硬编码第一个选项，因为你知道它们。但如果我们不知道选项，我们如何默认显示第一个选项？

【解决方案2】：

angular documentation for select* 没有明确回答这个问题，但它确实存在。如果您查看script.js，您会看到：

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

这是html：

<select ng-model="color" ng-options="c.name for c in colors"></select>

这似乎是在<select> 和ng-options 上默认选定值的更明显方式。如果您有不同的标签/值，它也会起作用。

* 这是来自 Angular 1.2.7

【讨论】：

这对我有用，我怀疑这会再次出现，但我目前正在使用 AngularJS v1.2.27，以防有人发现它并想知道兼容性。

【解决方案3】：

当您从数据库中获取数据、进行修改然后持久化更改时，此答案更有用。

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

在此处查看示例：

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

【讨论】：

这里终于有了一个可行的答案，赞成！同样使用此解决方案，您可以使未定义的选项正常工作。
很高兴这篇文章存在，我一直在寻找解决方案，这个解决了我的问题。

【解决方案4】：

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

【讨论】：

这里的做法不好...看看第二个黄色注释：docs.angularjs.org/api/ng/directive/select。
这行不通，例如。当您尝试编辑记录时，记录将如何与字段绑定？

【解决方案5】：

如果您的对象数组很复杂，例如：

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

您当前的模型设置为：

$scope.user.friend = {name:John, uuid: 1234};

它有助于在 uuid（或任何唯一字段）上使用 track by 函数，只要 ng-model="user.friend" 也有一个 uuid：

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

【讨论】：

这个答案让我很开心！还可以查看本文档中的 track by：docs.angularjs.org/api/ng/directive/ngOptions
这是最好的答案！

【解决方案6】：

我为此苦苦挣扎了几个小时，所以我想为它添加一些说明，这里提到的所有示例都是指从脚本本身加载数据的情况，而不是来自服务或一个数据库，所以我想为遇到和我一样问题的人提供我的经验。

通常您只在数据库中保存所需选项的 id，所以...让我们展示一下

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

最后是部分html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

基本上我想指出那块“model.id_model as model.name for model in models”“model.id_model”使用模型的id值，以便您可以匹配“mainObj.id_model”，这也是“selected_model”，这只是一个普通值，也是“as model .name”是repeater的标签，最后“model in models”就是我们都知道的常规循环。

希望这对某人有所帮助，如果有帮助，请投票：D

【讨论】：

您可以直接将选择绑定到mainObj.id_model (ng-model="mainObj.id_model")，而不是使用“占位符/纯值”变量selected_model
是的，确实，我只是想表明它可以直接在 $scope 内使用一个值来完成，但感谢您指出这一点。
是否可以绑定到一个对象而不仅仅是一个 int？我无法让我的 nGoptions 设置其选定的项目，因为它不知道如何将我的 {id:24} 绑定到我的 [{id:23},{id:24},{id:25}]。
你总是可以使用 $index 来获取位置，但是，是的，它可以绑定到一个对象
你也可以使用 ng-options="model.name for model in models track by model.id_model"

【解决方案7】：

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

只需添加具有空值的选项。它会起作用的。

DEMO Plnkr

【讨论】：

如果你添加类似<option value="" disabled>Please Select</option>的东西真的很有效

【解决方案8】：

更简单的方法是像这样使用data-ng-init：

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

这里的主要区别是您需要包含data-ng-model

【讨论】：

如文档中所述：ngInit 的唯一适当用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。
我发布的方式，使用 ng-options 更容易，更具体。两种方式都有效。

【解决方案9】：

ng-model 属性设置所选选项，还允许您通过管道传递过滤器，例如 orderBy:orderModel.value

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

【讨论】：

试试这个，我看到angular.js:117 TypeError: a.forEach is not a function。有什么想法吗？

【解决方案10】：

如果有人在 Chrome、IE 10/11、Firefox 的页面上偶尔遇到默认值未填充的情况，请尝试将此属性添加到您的输入/选择字段中，检查 HTML 中填充的变量，如下所示：

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

【讨论】：

【解决方案11】：

如果你不关心用一些数字 id 索引你的选项，这真的很简单。

声明你的 $scope var - people 数组
```
$scope.people= ["", "YOU", "ME"];
```

在上述范围的DOM中，创建对象

<select ng-model="hired" ng-options = "who for who in people"></select>

在您的控制器中，您将 ng-model 设置为“已雇用”。
```
$scope.hired = "ME";
```

祝你好运！！！真的很简单！

【讨论】：

【解决方案12】：

只是为了加起来，我做了这样的事情。

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>

【讨论】：