Пользовательская директива для заполнения выпадающего списка

0

Я хочу заполнить выпадающее меню select из базы данных. Сейчас данные поступают из массива scope.

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) {
                }
            });
        }
    };
});

Я не уверен, что выше директива - это правильный подход к моему требованию. Сервлет или URL-адрес не вызывается, когда я нажимаю на раскрывающийся список. Как мне достичь того же? Я все еще новичок в угловой.

Теги:

2 ответа

1

Директивы в Angular используются, когда вы хотите более легко взаимодействовать с DOM, ajax-звонки не имеют там бизнеса. Вы должны использовать сервис или фабрику для обработки асинхронного запроса, а затем просто вернуть результат в контроллер для дальнейших манипуляций. Обещание также потребуется, так как мы имеем дело с асинхронными заданиями.

'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>
Поделиться
-1

проверьте этот фрагмент, у вас была ошибка в объявлении директивы его верблюжьей кейс, поэтому он должен быть 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>
Поделиться
  • 0
    Это код, который я предоставил. Я хочу получить данные из базы данных.
  • 0
    я не могу предоставить вызов ajax во фрагменте, я просто закомментировал его, это не то же самое, у вас была опечатка в имени директивы DropDown, это должен быть dropDown, но он не был вызван.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню