如何使用 n- 选项设置选择元素的默认值

我在这里看到了角度选择指令的文档: 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"

我做错了什么？

429558 次浏览
小开
最佳答案

假设那个对象在你的作用域里:

<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"]
};
}

工作普朗克: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

小开

选择用角度文件 * 没有明确地回答这个问题，但它确实存在。如果你看看 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>

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

这是角度1.2.7

小开 
<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>
小开

我为此纠结了几个小时，所以我想补充一些说明，这里提到的所有例子，都指的是数据从脚本本身加载的情况，而不是来自服务或数据库的东西，所以我想提供我的经验给任何人，有同样的问题，因为我这样做。

通常您只在数据库中保存所需选项的 id，因此..

Service.js

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


return models;
});

控制器 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 Html

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

基本上我想指出的是“ Id _ model 作为 model 中 model 的名称”“ Id _ model”使用模型的 id 作为值，这样你就可以匹配“ MainObjec.id _ model”也就是“ Select _ model 选择 _ 模型”，这只是一个普通的值，也“ 作为模特的名字”是中继器的标签，最后“ 模型中的模型”只是我们都知道的常规周期。

希望这对某些人有所帮助，如果有的话，请投票支持 D

小开

如果有人在 Chrome、 IE 10/11、 Firefox 的页面中偶尔遇到默认值没有填充的情况，试着将这个属性添加到您的 input/select 字段中，检查 HTML 中填充的变量，如下所示:

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

如果对象数组很复杂，比如:

$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>
小开

当您从数据库中带入数据、进行修改并持久化更改时，这个答案更加有用。

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

看看这个例子:

Http://plnkr.co/edit/hrt5vumjotp9esgngbiv

小开

超模属性设置选择的选项，并允许您管道过滤器，如 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];
小开

一个更简单的方法是像这样使用 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

小开 
<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

小开

如果您不关心使用一些数字 id 来索引选项，那么这将非常简单。

  1. 声明 $scope var-people 数组

    $scope.people= ["", "YOU", "ME"];

  2. In the DOM of above scope, create object

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

  3. In your controller, you set your ng-model "hired".

    $scope.hired = "ME";

Good luck!!! It's really easy!

小开

总的来说，我做过类似的事。

 <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>

提交答案