AngularJS Dropdown出现问题

Issue with AngularJS Dropdown

本文关键字：问题 Dropdown AngularJS      更新时间：2023-09-26

我创建了AngularJS可靠的下拉列表，它可以很好地处理脚本文件中的静态数据。现在，我如何从URL将数据绑定到这些下拉列表。我没有一个单独的下拉url，只有一个url可以提供所有内容。

我应该如何解析数据以获得所需的输出？我对此很陌生，如果有人能帮忙，我将不胜感激！！

这里的第一个朋克：

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

问题是你的问题说明了一些东西，而你的演示显示了其他东西。

您可以使用angular直接解析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>

接下来是STATE的第二个下拉列表，即使范围发生了更改，也不会触发更改。

因此，使用$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);
    });

附言：上面的plunker不是很完美，你可能会遇到一些你应该能够解决的小问题。

相关文章：