如何使用ng-option设置select元素的默认值

Question

我在这里看到了Angular select指令的文档: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"

我究竟做错了什么？

Answer 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

Answer 2

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

Answer 3

当您从数据库中提取数据,进行修改然后保留更改时,此答案更有用.

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

查看此处的示例:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

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

Answer 5

如果您的对象数组很复杂,如:

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

而您当前的模型设置为:

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

它有助于track by在uuid(或任何唯一字段)上使用该函数,只要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>

Answer 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作为模型中模型的model.name "," model.id_model "使用模型的id作为值,这样你就可以匹配" mainObj.id_model "了" selected_model ",这只是一个普通的值," as model.name "是转发器的标签,最后" 模型中的模型 "只是我们都知道的常规循环.

希望这有助于某人,如果有,请投票:D

Answer 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

Answer 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