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

我在这里看到了Angular select指令的文档: http : //docs.angularjs.org/api/ng.directive :select。 我无法确定如何设置默认值。 这是令人困惑的:

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" 

我究竟做错了什么?

所以假设这个对象在你的范围内:

 <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

select *的angular度文档没有明确回答这个问题,但是它在那里。 如果你看一下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 <select>上的值。 如果你有不同的标签/值,它也可以工作。

*这是来自Angular 1.2.7

当您从数据库中提取数据,进行修改并保留更改时,此答案更为有用。

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

检查这里的例子:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

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

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

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

而你现在的模型是这样设置的:

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

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

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

通常情况下,只保存数据库中所需选项的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 ”也是中继器的标签,最后“ models in model ”就是我们都知道的正规循环。

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

 <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

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

ng-model属性设置所选的选项,并允许您pipe理像orderBy:orderModel.value这样的filter

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

如果任何人偶尔在Chrome,IE 10/11,Firefox的页面上运行默认值,请尝试将此属性添加到您的input/select字段中,以检查HTML中已填充的variables,如下所示:

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