Проблема с AngularJS Dropdown

Question

Я создал зависимые выпадающие списки AngularJS, работающий отлично со статическими данными из файла сценария. Теперь, как я могу привязать данные к этим выпадающим спискам из URL-адреса. У меня нет отдельного URL-адреса для выпадающих списков, есть один URL-адрес, предоставляющий все.

Как следует анализировать данные для получения требуемого результата? Я очень новичок в этом, буду благодарен, если кто-нибудь может помочь !!

Answer 1

Первый рабочий Punker здесь:

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

Проблема заключается ваш вопрос состояния что-то и ваш пример показывает, что-то еще.

Вы можете напрямую анализировать данные JSON на лету, используя угловые, тогда у вас нет функции ng-change, чтобы определить, какое выпадающее меню выбрано. Обратитесь к приведенному ниже коду о том, как я обрабатываю данные в html.

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

следующий ваш второй выпадающего списка, который ГОСУДАРСТВЕННАЯ не вызывает на изменения, даже если объем изменяется.

Так используйте $watch, чтобы увидеть изменения в объеме, когда это произойдет, применить его к CITY

Так что ваш JS:

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: выше plunker не очень вы можете решить некоторые незначительные проблемы, которые вы должны решить.