AngularJS下拉列表动态选择

时间:2019-01-10 06:17:03

标签: javascript angularjs select dropdown

您好,我是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, …}
  ]
}

我的结果页: enter image description here

  

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

     

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

请给出答案。预先感谢。

3 个答案:

答案 0 :(得分:1)

以这种方式尝试。

import re
rules=((lambda word:re.search('[sxz]$',word),lambda word:re.sub('$','es',word)),
    (lambda word: re.search('[^aeioudgkprt]h$', word),lambda word: re.sub('$', 'es', word)),
    (lambda word: re.search('[^aeiou]y$', word),lambda word: re.sub('y$', 'ies', word)),
    (lambda word: re.search('$', word),lambda word: re.sub('$', 's', word)))
def plural(noun):
    for findpattern,rule in rules:
        if findpattern(noun):
            return rule(noun)

print plural('boy')

我已经在您的选择标记中添加了此行<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>

答案 1 :(得分:1)

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

答案 2 :(得分:0)

最后我得到了结果

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