自定义指令来填充级联下拉 [英] Custom directive to populate cascading drop down

问题描述

我要填充从数据库中选择下拉。眼下数据是从范围数组来了。

I want to populate the select dropdown from database. Right now the data is coming from scope array.

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当我点击下拉选项没有被调用。我如何达到同样的？我仍然在角初学者。

I am not sure above directive is the right way of approach for my requirement. The servlet or url is not being called when I click on the drop down option. How do I achieve the same? I am still a beginner in angular.

推荐答案

指令的角度是当你想更轻松地与DOM交互使用Ajax调用没有生意那里。你应该宁愿使用服务或工厂来处理异步请求，然后只需在控制器进一步操作返回结果。一个承诺也将必要的，因为我们正在处理的异步的工作。

Directives in Angular are used when you want to more easily interact with the DOM, ajax calls have no business there. You should rather use a service or a factory to process the asynchronous request and then simply return the result in the controller for further manipulations. A promise will also be needed since we are dealing with asynchronous jobs.

'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）仅仅是返回一个数组，在这里你应该从你需要数据库的任何信息替换

The server side (ajax.php) is simply returning an array, here you should replace it with whatever information from the database you are needed

<?php

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

而不是使用一个指令，为选择键，分别为选项元素，我们可以使用的 NG选项这样的看法是这样的：

Instead of using a directive, for select and respectively option elements we can use ng-options so the view would look like this:

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

这篇关于自定义指令来填充级联下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！