如何角JS选择在选择列表中默认的下拉选项
我有以下选择选项：如何角JS选择在选择列表中默认的下拉选项
<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>
我想设置默认选项成员类[0]选择选项。我尝试了下面的代码，但没有工作。
的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
});
会员类JSON数据：
[
{
"class_id": 1,
"class_name": "Owner",
"class_details": "DCE"
},
{
"class_id": 7,
"class_name": "Staff "
},
{
"class_id": 10
"class_name": "Vendor"
}
]
Plunker样本：https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview （我得到错误，如果我不选择任何选项。 ..）
您可以利用ng-options这一点。这是大多数时候的首选方式。就像这样：
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
现在，既然你已经$scope.class_name指定为默认值，它将已经被选中。
其工作可以得到整个对象{【T }} .. –
@PrashanthHarish你得到整个对象..它只是我的对象只有'在那里class_name' .. – tanmay
我得到è RROR。我将该对象解析为“class0”：[JSON.parse（$ scope.class_name）]，在我初始化$ scope.class_name =“{}”之前;在开始的时候.... –
你应该definitly使用NG选项此
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
要设置默认情况下，无论是$ scope.class_name设置为成员类数组的值，也可以添加一个空当$ scope.class_name为空
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
<option value="">Select value</option>
</select>
使用ng-init选项标签下面将被选中。尝试如下。
<!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">
\t \t \t <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"> \t \t \t \t \t
\t \t \t </select>
\t \t \t <p>Selected Value: {{class_name}} <p>
\t \t \t </div>
</div>
\t
\t <button type="submit" ng-click="alertdata()">Save</button>
<script>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
\t
\t var MemberClass;
\t $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"
}
]
\t // \t $scope.class_name = $scope.MemberClass[0];
\t \t
\t \t
\t $scope.alertdata = function() {
\t \t $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));
\t };
});
</script>
</body>
</html>
试NG选项=“T为T为成员类T”一段时间NG选项做工精良 – Jenny
但内部下拉它作为正在添加[object.Object] –
给我数据MemerClass或只是尝试的：NG-选项=“T作为t.name为成员类T”，其中name是要在DRP – Jenny