如何在Angular JS的选择列表中选择默认下拉选项
[英]How to select default drop-down option in select list in Angular JS
问题描述
I have the following select option : 
我有以下选择选项：
<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>
I want to set default option MemberClass[0] to select option. 我想将默认选项MemberClass [0]设置为选择选项。 I tried the following code but not working. 我尝试了以下代码，但无法正常工作。
The JSON data is coming from Webservice... JSON数据来自Webservice ...
//To fetch Member Class
$http.get('http://192.168.1.6:8080/apartment//member/class/list').then(function(response) {
$scope.MemberClass = response.data.list;
$scope.class_name = $scope.MemberClass[0]; // Not working
});
Member class JSON data is : 成员类JSON数据为：
[
{
"class_id": 1,
"class_name": "Owner",
"class_details": "DCE"
},
{
"class_id": 7,
"class_name": "Staff "
},
{
"class_id": 10
"class_name": "Vendor"
}
]
Plunker sample : https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview (Am getting error if I not select any option...) Plunker示例： https ://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p = preview（如果我未选择任何选项，则会出现错误...）
3 个解决方案
解决方案1
1 已采纳 2017-05-09 05:58:12
You can utilize ng-options for this. 您可以为此使用ng-options 。 It is the preferred way most of the times. 在大多数情况下，这是首选方式。 Like this: 像这样：
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
Now, since you have $scope.class_name assigned as default value, it will be selected already. 现在，由于已将$scope.class_name分配为默认值，因此将已选择它。
解决方案2
1 2017-05-09 12:20:10
Use ng-init . 使用ng-init 。 Try like below. 尝试如下。
<!DOCTYPE html> <html ng-app="myApp" ng-controller="Ctrl"> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div class="form-group"> <label class="control-label col-md-3">Member Class </label> <div class="col-md-4"> <select ng-model="class_name" ng-init=" class_name = MemberClass[0]" name="class_name" ng-options="t as t.sub_class_name for t in MemberClass"> </select> <p>Selected Value: {{class_name}} <p> </div> </div> <button type="submit" ng-click="alertdata()">Save</button> <script> angular.module('myApp', []) .controller('Ctrl', function($scope) { var MemberClass; $scope.MemberClass = [{ "sub_class_id": 1, "sub_class_name": "Primary" }, { "sub_class_id": 2, "sub_class_name": "Secondary " }, { "sub_class_id": 3, "sub_class_name": "Dependent " }, { "sub_class_id": 4, "sub_class_name": "Sub Member" }, { "sub_class_id": 5, "sub_class_name": "None" } ] // $scope.class_name = $scope.MemberClass[0]; $scope.alertdata = function() { $scope.class_name = "{}"; var parameter; parameter = { "member": { "first_name": "first_name", "role": [{ "role_id": 4 }], "associated": "associated", "class0": [JSON.parse($scope.class_name)], "contect": [{ "intercom": "intercom" }], "individualdetails": [{ "gender": "gender" }] }, "address": [{ "street_address_1": "street_address_1" }] } console.log(JSON.stringify(parameter)); }; }); </script> </body> </html>
解决方案3
0 2017-05-09 06:13:00
You should definitly use ng-options for this 您应该为此明确使用ng-options
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
To set a default, either set the $scope.class_name to a value of the MemberClass array or you can add an empty option tag as below which will be selected when the $scope.class_name is null 要设置默认值，请将$ scope.class_name设置为MemberClass数组的值，或者可以添加如下所示的空选项标签，当$ scope.class_name为null时将选择该选项标签
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
<option value="">Select value</option>
</select>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.