Question

我想填充数据库中的选择下拉列表。现在数据来自范围数组。

HTML：

<div ng-controller="DropDownController">
    Country: 
    <select id="country" class="input-sm" name ="country" ng-model="states" ng-options="country for (country, states) in countries" drop-down required>
        <option value=''>Select</option>
    </select>

    States: <select id="state" class="input-sm" name="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" required>
        <option value=''>Select</option></select>

    City: <select id="city" class="input-sm" name="city" ng-disabled="!cities || !states" ng-model="city" required>
        <option value=''>Select</option> 
        <option ng-repeat="city in cities" value='{{city}}'>{{city}}</option></select>        
</div>

指令：

app.directive('DropDown', function ($http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            $http.get('DropDown.do').success(function (data) {
                if (data) {
                }
            });
        }
    };
});

我不确定上述指令是否符合我的要求。单击下拉选项时未调用servlet或url。我如何实现同样的目标？我仍然是角色的初学者。

Answer 1

当您想要更轻松地与DOM交互时，使用

Directives in Angular，ajax调用在那里没有业务。您应该使用服务或工厂来处理异步请求，然后只需将结果返回到控制器中以进行进一步操作。由于我们正在处理异步作业，因此还需要promise。

'use strict';

var app = angular.module('app', []);

app.factory('countryFactory', function($http) {
    var getCountries = function() {
        return $http.get('ajax.php').success(function(data) {
            return data;
        })
    }
    return { getCountries: getCountries }
})

app.controller('DropDownController', function($scope, countryFactory) {
    var ajaxPromise = countryFactory.getCountries();

    // Promises are executed once $http is done with the asynchronous job
    ajaxPromise.then(function(result) {
        $scope.countries = result.data;
    })
})

服务器端（ajax.php）只是返回一个数组，在这里你应该用你需要的数据库中的任何信息替换它

<?php

echo json_encode(array(
    array('id' => 1, 'name' => 'USA'),
    array('id' => 2, 'name' => 'Australia'),
));

对于select和option元素，我们可以使用ng-options而不是使用指令，因此视图将如下所示：

<div ng-controller="DropDownController">
    <select ng-options="country.name for country in countries track by country.id" ng-model="selected">
</div>

Answer 2

检查这个片段你在指令声明中遇到了骆驼的错误，所以它应该是dropDown而不是DropDown！

var app = angular.module('app', []);

app.directive('dropDown', function ($http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
          //replace with your call
             //$http.get('DropDown.do').success(function (data) {
               //// if (data) {
                  //scope.countries = data;
                //}
            //});
           scope.countries =
            {
                'USA':
                    {
                        'Alabama': ['Montgomery', 'Birmingham'],
                        'California': ['Sacramento', 'Fremont'],
                        'Illinois': ['Springfield', 'Chicago']
                    },
                'Australia':
                    {
                        'New South Wales': ['Sydney'],
                        'Victoria': ['Melbourne']
                    }
            };
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  Selected country : {{states}}
  <select id="country" class="input-sm" name="country" ng-model="states" ng-options="country for (country, states) in countries" drop-down required>
    <option value=''>Select Country</option>
  </select>

</body>

用于填充级联下拉列表的自定义指令

2 个答案: