自定義指令來填充級聯下拉列表

我想從數據庫填充選擇下拉列表。現在數據來自範圍數組。自定義指令來填充級聯下拉列表

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沒有被調用。我如何實現相同？我仍然是一個角度初學者。

來源

2015-06-28 kittu

我是一點從你的問題感到困惑，做你想用DB中的值填充下拉列表，或者當你點擊任何選項時你想調用servlet 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，它沒有被調用。 –

但我從來沒有提到我有一個使用範圍數組的問題。它已經運行良好 – 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

自定義指令來填充級聯下拉列表

回答

相關問題