AngularJS下拉列表动态选择

Question

嗨，我是Angularjs的初学者，我想选择动态选择的drop-down 。 我引用了一些博客，但我不明白。

这是我的HTML代码：

<select class="form-control" name="category_id" ng-model="formData.category_id" ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-required="true">
    <option value="">Select Sub Directory</option>
</select>

js代码：

$scope.getData = function() {
    return webServices.getSync('getshops/' + $scope.Id).then(function(getData) {
        if (getData.status == 200) {       
            $scope.formData = getData.data;
    console.log($scope.formData);
        } else {
            $rootScope.$emit("showerror", getData);
        }

    });
}

$scope.getSubDirectories = function()
{
    return webServices.getSync('getSubDirectories').then(function(getData) 
    {
        $rootScope.loading = false;
        if (getData.status == 200) 
        {
            $scope.formData.getSubDirectories = getData.data;
        } else {
            $rootScope.$emit("showerror", getData);
        }
        //console.log($scope.formData.getSubDirectories);
    });
}

我在控制台中的结果

{
  "id": 1,
  "membership_type_id": 1,
  "name": "Kallyan",
  "address": "100 feet road",
  "location": "Coimbatore",
  "description": "Test",
  "banner_image": "upload/directory/contact/directoryMsrq4NhsD1.jpg",
  "business_days": [
    "M",
    "T",
    "W",
    "Th",
    "F",
    "S"
  ],
  "start_time": "2019-01-10T09:01:00+05:30",
  "end_time": "2019-01-10T10:01:00+05:30",
  "contact_number": "9874563210",
  "latitude": 11.2,
  "longitude": 9.5,
  "is_certified": 1,
  "status": 3,
  "rating": 0,
  "is_online_order": 1,
  "created_at": "1970-01-01 05:30:01",
  "created_by": 0,
  "is_active": 1,
  "updated_at": "2019-01-09 18:14:22",
  "updated_by": 0,
  "status_updated_by": 0,
  "status_updated_on": "2019-01-09 18:14:22",
  "priority": 0,
  "comments": "Test",
  "additional_information": "",
  "old_banner_image": "directoryMsrq4NhsD1.jpg",
  "sub_directory": "Jewellery",
  "getSubDirectories": [
    0: {id: 2, name: "Jewellery", image: "directory5Wltlbhkwl.jpg", thumbnail_image: "directory5Wltlbhkwl.jpg", isparent: 1, …}
    1: {id: 3, name: "Mobile", image: "directoryjWQeyCQlGe.jpg", thumbnail_image: "directoryjWQeyCQlGe.jpg", isparent: 1, …}
    2: {id: 6, name: "KPN", image: "directoryC8qEC3o3Gh.jpg", thumbnail_image: "directoryC8qEC3o3Gh.jpg", isparent: 1, …}
  ]
}

我的结果页面：

在这里，我要选择sub_directory: Jewellery作为选定的drop-down值。

我不理解HTML ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories"这段代码， ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" 。

请给出答案。 提前致谢。

Answer 1

这样尝试。

<select class="form-control" name="category_id" ng-model="formData.category_id" ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-required="true" ng-init="selected='Jewellery'">
        <option value="">Select Sub Directory</option>
    </select>

我在您的选择标记中添加了这行ng-init="selected='Jewellery'" 。

Answer 2

<select class="account-form" ng-model="formData.category_id" id="category_id" name="category_id">
                    <option value="">---Select---</option>
                    <option ng-repeat="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-selected="sub_directory.id == 1">
                        {{sub_directory.name}}
                    </option>
                </select>

Answer 3

终于我得到了结果

<select class="form-control" ng-model="formData.category_id" ng-options="directory.id as directory.name for directory in formData.getSubDirectories" ng-init="formData.category_id='2'">
    <option value="">Select Sub Directory</option>
</select>