0

我有这个代码...

Agencyapp.factory('AgencyData', function ($http, $log) {
return {
    getAgencies: function(successcb){
        $http({ method: 'GET', url: 'http://localhost/MappingServicesWebAPI/api/mapping' }).
        success(function(data){
            successcb(data);
        }).
        error(function(data){
            $log.warn(data, status, headers, config);
        })
    }

}
});

它从 WebAPI 获取数据。模型被一个数组$scope.Agencies填充。AgencyList当我尝试使用该数组时...

<div ng-controller="AgenciesCtrl">
    <select ng-model="Agencies">
        <option>Select Agency</option>
        <option ng-repeat="A in Agencies" >{{A.AgencyList.AgencyName}}</option>
    </select>
    {{Agencies.AgencyList}}
</div>

它是空的......有人可以帮我解决我可能做错的事情吗？

这是控制器，对不起，我以为我包括了它...

Agencyapp.controller('AgenciesCtrl', function AgenciesCtrl($scope, AgencyData) {

AgencyData.getAgencies().then(function (rtnAgencies) {
    $scope.Agencies = rtnAgencies;

});

});

我试图发布已填充的 $scope 对象的图片，但我没有足够的声望点...

看起来像这样（每个缩进都是一个嵌套对象）......

$scope.Agencies
  [prototype]
  AgencyList[]
    [0]
      [prototype]
      AgencyID    -10168
      AgencyName  "#1 Insurance Agency"

如果我对数据进行硬编码...

function AgenciesCtrl($scope, AgencyData) {

$scope.Agencies = [
            {
                AgencyID: 'Test One',
                AgencyName: 'Agency Test 1'
            },
            {
                AgencyID: 'Test Two',
                AgencyName: 'Agency Test 2'
            }];


};

有用

如果我在函数调用中硬编码数据

function AgenciesCtrl($scope, AgencyData) {



AgencyData.getAgencies().then(function (rtnAgencies) {
    $scope.Agencies = [
            {
                AgencyID: 'Test One',
                AgencyName: 'Agency Test 1'
            },
            {
                AgencyID: 'Test Two',
                AgencyName: 'Agency Test 2'
            }];


});


};

它不起作用

我还没有看到一个使用来自 web api 的数据的好例子......我见过硬代码数据的所有例子，那有什么意义呢？

4

2 回答 2

1

首先，ng-model="Agencies"从您的<select>元素中删除。您不想将您的选择元素绑定到您正在运行的同一对象ng-repeat。尝试类似的东西<select ng-model="selectedAgency" >。

其次，我建议使用 Angular 的延迟 API 来返回一个 Promise，然后当它完成时，它将使用从服务器返回的数据的值来解决：

Agencyapp.factory('AgencyData', function ($http, $log, $q) {
return {
    getAgencies: function(successcb){
        var deferred = $q.defer();
        $http({ method: 'GET', url: 'http://localhost/MappingServicesWebAPI/api/mapping' }).
        success(function(data){
            deferred.resolve(successcb(data)); //I dont know what successcb() does                
        }).
        error(function(data){
            deferred.reject(data);
            $log.warn(data, status, headers, config);
        })
        return deferred.promise;
    }
};
});

在您的控制器中，您将执行以下操作：

  AgencyData.getAgencies().then(function(data) {
     $scope.Agencies = data;
  });

一旦 getAgencies() 函数完成获取数据，$scope.Agencies 对象将使用结果数据进行更新。

于 2013-10-07T20:50:07.480 回答
0

原来我有我的...

<div ng-controller="AgenciesCtrl">
<select ng-model="Agencies">
    <option>Select Agency</option>
    <option ng-repeat="A in Agencies" >{{A.AgencyList.AgencyName}}</option>
</select>
{{Agencies.AgencyList}}
</div>

在一个由名为 Slidebox.js 的 Javascript 库控制的内部。一旦我删除 Slidebox.js 一切正常。

于 2013-10-24T19:00:25.337 回答