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

Я хочу заполнить выпадающий список из базы данных. Сейчас данные поступают из массива 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-адрес не вызывается, когда я нажимаю на раскрывающийся список. Как мне достичь того же? Я все еще новичок в угловой.

источник

2015-06-28 kittu

я немного запутался из вашего вопроса, сделать вы хотите, чтобы выпадающий список заполнить со значениями из базы данных, или вы хотите вызвать сервлет-url, когда вы нажимаете на любой параметр? –

Я хочу заполнить выпадающий список из базы данных – kittu

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

источник

2015-06-28 11:34:36

Это код, который я предоставил. Я хочу получить данные из базы данных. – kittu

Я не могу предоставить вызов ajax в фрагменте, я просто прокомментировал это, его не то же самое, у вас была опечатка в имени директивы, DropDown, она должна быть dropDown, ее whty она не была вызвана. –

Но я никогда не упоминал, что у меня была проблема с использованием массива из области. Его уже работает отлично – kittu

Directives in Angular используются, когда вы хотите, чтобы более легко взаимодействовать с DOM, AJAX звонки не имеют никакого бизнеса там. Вы должны использовать сервис или фабрику для обработки асинхронного запроса, а затем просто вернуть результат в контроллер для дальнейших манипуляций. A 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>

источник

2015-06-28 12:22:16 Avalanche

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

ответ

Смежные вопросы