Question

我正在尝试使用一些JSON并填充下拉菜单的选项。我正在使用Materialize一个前端css框架，我认为这可能是问题的根源。我这样说是因为如果我使用默认的浏览器下拉菜单，它的工作方式与我预期的完全相同，但不能与他们的（Materialise＆＃39; s）下拉列表一起工作。我必须在页面加载时初始化下拉列表，所以也许解决方案是我必须重新启动它，但我不知道该怎么做。

这是表格所在的html：

            <div class="row" style="margin-bottom:0px">
                <form class="col s12">                                         <div class="row">
                        <div class="input-field col s12">
                            <select ng-options="Country for Country in countries" ng-model="selCountry" ng-change="onChange('sel')">
                                <option value="" disabled>Select Indicator</option>
                            </select>

                        <label>Indicators</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="search_targets" type="text" ng-model="searchText" ng-change="onChange('txt')">
                            <label for="search_targets">Search Targets</label>
                        </div>
                    </div>

                    <div class="col s12" style="
                        padding-left: 11.250px;
                        padding-right: 11.250px;
                        margin top:5vh;
                        ">
                        <table>
                            <thead>
                                <tr>
                                    <th data-field="id">Name</th>
                                    <th data-field="name">Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="item in records | orderBy:'Name':reverse | filter:selCountry | filter:searchText | limitTo: 10">
                                    <td>{{item.Name}}</td>
                                    <td>{{item.Country}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>

这就是我所拥有的所有JS，包括@下拉列表的初始化：

(function($){


  angular.module('myapp', [])
  .controller('MainCtrl', function($scope, $http) {
    var records;
    $scope.selCountry = '';
    $scope.searchText = '';
    $http.get('http://www.w3schools.com/angular/customers.php').success(function(dt) {
      //window.alert(angular.toJson(dt));

      $scope.countries = [];
      $scope.records = dt.records;
      dt.records.forEach(function(o) {
        var c = o.Country;
        if ($scope.countries.indexOf(c) == -1)
          $scope.countries.push(c);
      });
      $scope.total = $scope.countries.length;
      ready();
    });

    $scope.matches = 0;

    $scope.onChange = function(src) {
      if (src === 'txt') {
        $scope.selCountry = '';
        $scope.search = $scope.searchText;
      } else {
        $scope.searchText = '';
        $scope.search = $scope.selCountry;
      }
      search($scope.search);
    };

  });
    $(function(){

    $('.button-collapse').sideNav();

  }); // end of document ready

    $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
  });

    $(document).ready(function(){
    $('ul.tabs').tabs('select_tab', 'tab_id');
    $('select').material_select();
  });

})(jQuery); // end of jQuery name space

如果解决方案是在拉出JSON后重新初始化下拉列表，我不知道该怎么做。

Answer 1

在成功回调中，您必须使用$scope.$apply来应用范围修改，因为$http是异步的。然后，您是否检查了dt包含console.log(dt)的内容？

Answer 2

您只需调用（与初始化方式相同）

即可重新初始化或更新您的select元素

$('select').material_select();

注意：您应该在成功回调中调用此声明。

下拉选项未填充JSON

2 个答案: