javascript - ng-options 减慢数据渲染速度或在下拉列表中单击数据渲染时数据量较少

Question

在我看来(使用处理程序栏模板)在页面加载函数 get 调用并从服务器获取值并通过 ng-options 加载两个下拉列表的值，但在单击两个选择框后数据都会进入两个下拉列表。意味着在第一个选择框上单击数据不会呈现，而在单击第二个选择框后数据会出现在两个下拉列表中。

 <form>
                      <div class="form-group">
                         <div class="col-md-4">
                            <select class="form-control" ng-model="CDOplace" ng-options="place.Id as place.Name for place in place">
                              <option value="">To:   Himachal</option>
                            </select>
                          </div>
                          <div class="col-md-4">
                            <select class="form-control" ng-model="CDOdate" ng-options="mon.Id as mon.Name for mon in month">
                                <option value="">Month of Travel</option>

                            </select>
                          </div>
                          <div class="col-md-4">
                              <button type="submit" class="btn btn-info btn-block" ng-click="btnExplore()">Explore <span class="fa fa-caret-right"></span></button>
                          </div>
                        </div>
                    </form>

controller-file:
    var app = angular.module('myApp',[]);
    app.controller("myCtrl",['$http','$scope',function($http,$scope){
        onLoad();
        function onLoad(){
            $.ajax({
              url: "/tourData",
              method: "GET"
            }).then (function successCallback(response){
                          console.log(response);
                          $scope.place = response.toursiumData;
                          $scope.month= response.tripMonthData;
                    });
          }
    }]);
response:--
var toursiumData = [{
                Id: 1,
                Name: 'Himachal'
            }, {
                Id: 2,
                Name: 'Goa'
            }, {
                Id: 3,
                Name: 'Sikkim'
            },{
                Id: 4,
                Name: 'Kerla'
            }, {
                Id: 5,
                Name: 'Thailand'
            }];

  var tripMonthData = [{
                Id: 1,
                Name: 'April'
            }, {
                Id: 2,
                Name: 'May'
            }, {
                Id: 3,
                Name: 'June'
            },{
                Id: 4,
                Name: 'July'
            }, {
                Id: 5,
                Name: 'August'
            }];

Answer 1

由于 $.ajax 是一个 jQuery 函数 - 并且成功运行的回调超出了 Angular 的范围，因此您必须告诉 Angular 使用 $scope.month 和 $scope.place 中新引用的数据重新渲染。像这样:

.then (function successCallback(response){
                          console.log(response);
$scope.$apply(function(){
$scope.place = response.toursiumData;
                          $scope.month= response.tripMonthData;
})
                    });