代码之家 › 专栏 › 技术社区 › Ramesh S

Angularjs下拉列表动态选择

dropdown select angularjs javascript

Ramesh S · 技术社区 · 6 年前

你好,我是英语初学者 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 被选中 下拉列表 价值

ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" .

请给出答案。提前谢谢。

3 回复 | 直到 5 年前

Mayank Vadiya Chintan Hingrajiya 6 年前

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

Mukund Thakkar 6 年前

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

Ramesh S 6 年前

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