Problem mit AngularJS Dropdown

Question

Ich habe AngularJS zuverlässige Dropdowns erstellt, es funktioniert gut mit statischen Daten aus Skriptdatei. Wie kann ich nun Daten von einer URL an diese Dropdowns binden? Ich habe keine separate URL für Dropdowns, es gibt eine URL, die alles liefert.

Wie soll ich die Daten analysieren, um die erforderliche Ausgabe zu erhalten? Ich bin sehr neu zu diesem, werde dankbar sein, wenn jemand helfen kann !!

Answer 1

Erste Arbeits Punker hier:

http://plnkr.co/edit/okKOeQViflRseqrOYeOY?p=preview

Das Problem ist Ihre Frage Staaten etwas und Ihre Demo zeigt etwas anderes.

Sie können die JSON-Daten direkt analysieren, indem Sie angular verwenden. Dann haben Sie keine Funktion ng-change, um zu erkennen, welches Dropdown ausgewählt wurde. Sehen Sie im folgenden Code nach, wie ich die Daten in html selbst analysiere.

   <div class="col-sm-4"> 
        <am-multiselect class="input-lg" 
            template-url="multiselect.tmpl.html" 
            ng-model="selectedcountry" ms-header="Select country" style="width:200px;" 
            options="c.CountryName for c in table" 
            ng-change="setState(selectedcountry)" 
            change="selected()"></am-multiselect> 



       </div> 
      </div> 
      <div class="form-group"> 

       <div class="col-sm-4"> 
        <am-multiselect class="input-lg" multiple="true" ms-selected="{{selectedState.length}} State(s) selected" 
            ng-model="selectedState" ms-header="Select States" 
            options="s.STATE for s in table" 
            ng-change="setCity(selectedState)" 
            template-url="multiselect.tmpl.html" style="width:500px;" 
            change="selected()"> 
        </am-multiselect> 

       </div> 
      </div> 

      <div class="form-group"> 

       <div class="col-sm-4"> 
        <am-multiselect class="input-lg" multiple="true" ms-selected="{{selectedCity.length}} City(ies) selected" 
            ng-model="selectedCity" ms-header="Select City" 
            options="m.CityName for m in table" 
            template-url="multiselect.tmpl.html" style="width:500px;" 
            change="selected()"></am-multiselect> 

       </div> 
      </div> 

neben Ihrem zweiten Drop-Down, dieSTATE ist nicht ausgelöst, auch bei Änderung, wenn der Umfang geändert wird.

So ein $watch verwenden, um die Änderungen an Umfang zu sehen, wenn sie es in die CITY

Ihre js So geschieht gelten:

angular.module('app', ['am.multiselect']); 

angular.module('app') 
    .controller('ctrl', function($scope, $http, $location, $filter,$window) { 

    var tableData = { 
     "Table": [{ 
     "CountryUid": 3, 
     "CountryName": "INDIA", 
     "STATE": "AndraPradesh", 
     "CityId": 3, 
     "CityName": "Vijayawada" 
     }, { 
     "CountryUid": 2, 
     "CountryName": "USA", 
     "STATE": "Florida", 
     "CityId": 3, 
     "CityName": "Tampa" 
     }, { 
     "CountryUid": 3, 
     "CountryName": "INDIA", 
     "STATE": "Assam", 
     "CityId": 3, 
     "CityName": "Jorhat" 
     }] 
    }; 

    var countries = []; 
    var states = []; 
    var cities = []; 

    $scope.table = tableData.Table; 
    $scope.countries = countries; 
    $scope.states = states; 
    $scope.cities = cities; 
    $scope.selectedsite = null; 
    $scope.selectedState = []; 
    $scope.selectedCity = []; 

    $scope.setState = function(country) { 
     $scope.selectedStates = tableData.Table.filter(function(el) { 
     return el.CountryName === country 
     }); 
     $scope.selectedState = $scope.selectedStates.map(function(elm) {return elm.STATE;}); 
    } 
    $scope.setCity = function(state) { 
     selectedCity = tableData.Table.filter(function(el) { 
     return el.STATE === state 
     }); 
     $scope.selectedCity = selectedCity.map(function(elm) {return elm.CityName;}); 
    } 
    $scope.$watch('selectedStates', function(newVal, oldVal, theScope) { 
     $scope.selectedCity = newVal.map(function(elm) {return elm.CityName;}); 
     console.log(newVal,$scope.selectedCity); 
    }); 

PS: Die obige Plunker ist nicht sehr Perfekt können Sie einige kleinere Probleme, die Sie lösen sollten.