Question

我尝试使用ajax json数据填充bootstrap Modal中的select选项，并使用了2个变通方法，但没有输出数据

第一次使用ng-repeat标记

   <div class="form-group" ng-show="formInfo.sourceType =='api'">
            {{ API }}
            <label for="selectAPI" class="col-sm-2 control-label">Select API</label>
            <div class="col-sm-8">
              <select ng-model="selectedAPI"  class="form-control">
               <option value="{{item.id}}" ng-repeat="(i,item) in networks"> {{item.name}}</option>
            </select>
            <pre>{{ networks }}</pre>
   </div>

第二次使用ng-options

   <div class="form-group" ng-show="formInfo.sourceType =='api'">
            {{ API }}
            <label for="selectAPI" class="col-sm-2 control-label">Select API</label>
            <div class="col-sm-8">
               <select ng-model="selectedAPI" ng-options="item.name for item in networks" class="form-control"> </select>
            <pre>{{ networks }}</pre>
   </div>

控制器

$request('onAPI', {success: function(data, scope){
            this.success(data).done(function() {
                  $scope.networks = [];
                  $scope.networks = angular.fromJson(data.result);
                  $scope.selectedAPI = null;
                 //$scope.selectedAPI = $scope.apis[0];
                 console.log($scope.networks); // I have output

            });
        }
    });

响应json

   [{
        "id":"1",
        "name":"Zanox"
        },{
        "id":"2",
        "name":"Affilinet",

    }]

搞定了

var ModalInstanceCtrl = function ($scope, $modalInstance, items, $request) {

  $scope.items = items;
  $request('onAPI', {success: function(data, scope){
            this.success(data).done(function() {
                  $scope.networks = [];
                  $scope.networks = angular.fromJson(data.result);
                  $scope.selectedAPI = null;
                 //$scope.selectedAPI = $scope.apis[0];
                 console.log($scope.networks);

            });
        }
    });

};

Answer 1

试试这个

<select ng-model="selectedAPI" class="form-control"
    ng-options = "item.name as item.name for item in networks" >
</select>

Answer 2

首先，您的ng-model selectedAPI似乎没有值，然后默认情况下会创建一个空白选项。其次，当使用ajax进行异步http请求时，可能无法按时生成响应。因此，您可以使用$ scope。$ apply方法强制AngularJS数据重新加载。像：

$request('onAPI', {success: function(data, scope){
            this.success(data).done(function() {
                $scope.$apply(function(){
                      $scope.networks = [];
                      $scope.networks = angular.fromJson(data.result);
                      $scope.selectedAPI = null;
                     //$scope.selectedAPI = $scope.apis[0];
                     console.log($scope.networks); // I have output
                });
            });
        }
    });

请告诉我它是否有效。感谢。

AngularJS ng-repeat和ng-options不在Bootstrap Modal中输出选项

2 个答案: