Question

考虑我有10个位置，我必须显示每个位置的天气状况。很容易获取所有locationids并将其提供给函数以一次获取所有10个位置的数据并显示它。但我想从服务器端单独加载并将其提供给角度部分。即加载第一个位置数据然后显示第二个等等。这可能吗？

这是我的角度代码。这工作正常。我想改为上面提到的逻辑

var locations = [1,2,3,...,10];
locationService.UpdateDashBoard(locations).then(function (result) {
    $scope.results.push(result.data);  
});

Html代码

<li gridster-item="widget" ng-repeat="widget in results">
   <div class="text-center wrap-text">
       <span ng-show="!editMode">{{ widget.name }}</span>
       <label style="cursor: move" ng-show="editMode">{{ widget.name }}</label>
       <div class="pull-right" ng-show="editMode && widget.Source">
           Location - {{widget.location}}
           temperature - {{widget.Source.temperature}}
       </div>
  </div>
</li>

Answer 1

虽然您的locationService.UpdateDashBoard函数可能会接受多个ID，但正如您在问题中所述，传递ID列表将导致所有数据立即返回。鉴于您需要单独加载每个位置，您只需为每个ID调用一次服务：

var locations = [1,2,3,...,10];    
locations.forEach(function(location) {  
    locationService.UpdateDashBoard([location]).then(function (result) {
        $scope.results.push(result.data);
    });
});

每次通话响应后，位置的数据都会被推送到$scope.results数组中。这就是角度的魔力开始......因为你已经将ng-repeat指令绑定到结果数组 - 在添加每个新位置后，UI将自动更新。

Answer 2

如果我理解正确，你想要在一次点击（结果）中获取所有数据，但是逐步将它们添加到DOM中。我不确定MS_AU的答案是否会提供您需要的正确功能 - 看起来它会为每个id调用服务器，但是每次传递整个数组并从服务器返回所有数据。您最终会在$scope.results中找到100件商品。

编辑：如果我对您的问题的理解是正确的，您想要为每个ID调用服务器，因此您应该更改您的服务方法以接受一个ID，并迭代ID并调用功能

如果在私有函数中返回promise，则可以在forEach循环内调用.then()并推送结果。如果您未在服务功能中退回$ promise，则需要处理控制器中的.$promise。

var locations = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var updateDashboard = function(id) {
    return locationService.UpdateDashBoard(id);
};
locations.forEach(function(id) {
    updateDashboard(id).then(function (result) {
        $scope.results.push(result.data);
    });
});

你的HTML：

<li gridster-item="widget" ng-repeat="widget in results">
  <!-- fade is just an ng-animate class I picked, you can choose your own or none -->
  <div class="text-center wrap-text fade">
     <span ng-show="!editMode">{{ widget.name }}</span>
     <label style="cursor: move" ng-show="editMode">{{ widget.name }}</label>
     <div class="pull-right" ng-show="editMode && widget.Source">
         Location - {{widget.location}}
         temperature - {{widget.Source.temperature}}
     </div>
  </div>
</li>

Answer 3

听起来你想通过一个接一个地链接每个id来做一个排序请求。我建议使用$q来做到这一点。

var locations = [1,2,3,...,10];

// create a "start" promise
var promiseChain = $q.when(function(){});

// loop each locations
locations.forEach(function (location) {

    // promisify the locationService function
    var promiselink = function () {
        var deferred = $q.defer();

        locationService.UpdateDashBoard([location])
        .then(function (result) {
            $scope.results.push(result.data); 
            deferred.resolve() 
        });

        return deferred.promise;
    }

    // promiseChain will wait until promiselink return with the promise
    promiseChain = promiseChain.then(promiselink);
})

promiseChain.then(promiselink);应该可以解决问题，因为它等待promiselink函数解析承诺。

有没有办法加载单个数据并显示它而不是使用angularjs加载和显示所有数据？

3 个答案: