如何在Angular JS 中select select 列表中的默认下拉选项

Question

我有以下 select 选项：

<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>

我想将默认选项 MemberClass[0] 设置为 select 选项。我尝试了以下代码但没有工作。

JSON 数据来自网络服务...

//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
});

成员classJSON数据为：

[
    {
        "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 （如果我没有 select 任何选项，就会出现错误...）

Answer 1

您可以为此使用 ng-options。大多数时候这是首选方式。像这样：

<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>

现在，由于您已将 $scope.class_name 指定为默认值，因此它已被选中。

working example

Answer 2

你绝对应该为此使用 ng-options

<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>

要设置默认值，请将 $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>

Answer 3

使用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">
     <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>

如何在Angular JS 中select select 列表中的默认下拉选项

How to select default drop-down option in select list in Angular JS

javascript

arrays

json

html-select

angularjs