選択されたチェックボックスに基づいて結果の配列を返します

Question

私は別々のエンドポイントを持つ異なるチェックボックスを持っています。私はそれに応じてエンドポイントを呼び出し、実際のチェックボックスに基づいて、さらにフィルタリングのためにすべての結果を1つの配列に返します。私が今までオンラインで見つけたリソースは、すべての要求をチェーンするために$ q.allを使用する必要がありますが、選択したチェックボックスに基づいてこれを実現することはできません。

これはこれまで私が行ってきたことです。私は助けが必要です。

テンプレート

<div class="col-sm-4" ng-repeat="item in checkBoxes"> 
    <input type="checkbox" ng-model="item.selected"> 
    <span>{{item.name}}</span>  
</div> 
<button ng-click="getResult()">Get Result</button> 

コントローラ

$scope.checkBoxes = [ 
    { 
    id: 1, 
    name: "option1", 
    selected: false 
    }, 
    { 
    id: 2, 
    name: "option2", 
    selected: false 
    }, 
    { 
    id: 3, 
    name: "option3", 
    selected: false 
    } 
]; 

// Checking which option is checked 

$scope.optionChecked = function(choice) { 
    $scope.details = []; 
    angular.forEach(choice, function(value, key) { 
    if (choice[key].selected) { 
     $scope.details.push(choice[key].name); 
    } 
    }); 
}; 

function isInArray(name,details) { 
    for (var i = 0; i < details.length; i++) { 
     if (details[i].toLowerCase() === name.toLowerCase()){ 
     return true; 
     } 
    } 
    return false; 
} 

function loadPage() { 
    if (isInArray("option1",$scope.details)){ 
     Servicename.endpoint1() 
     .success(function(response) { 
     console.log(response); 
     }); 
     }) 
     .error(function() { 
     console.error(arguments); 
     $scope.failed = true; 
     }) 
    } 
if (isInArray("option2",$scope.details)){ 
     Servicename.endpoint2() 
     .success(function(response) { 
     console.log(response); 
     }); 
     }) 
     .error(function() { 
     console.error(arguments); 
     $scope.failed = true; 
     }) 
    } 
} 

これは私が達成しようとしている結果です。 finalResultはloadPage関数から取得します。

$scope.getResult = function() { 
    $scope.optionChecked($scope.checkBoxes); 
    if($scope.details.length > 0 && $scope.details[0] !== null){ 
    loadPage().then(function(finalResult) { 
     console.log("This should return the final array based on checked 
     boxes") 
    }); 
} 

Answer 1

$q.allは、ネイティブPromise.allと同じAPIを保持します。それは一連の約束を取り、すべての子供の約束が解決したときに解決する新しい約束を返します。

各Service.endpointX()コールから返される約束を受けて、配列xに格納する必要があります。その後Promise.all(x)返す：子の約束に成功ハンドラを取り付けること

function loadPage() { 
    var promises = []; 

    if (isInArray("option1",$scope.details)){ 
    promises.push(Servicename.endpoint1().success(...).error(...)) 
    } 

    if (isInArray("option2",$scope.details)) { 
    promises.push(Servicename.endpoint2().success(...).error(...)) 
    } 

    return $q.all(promises) 
} 

ベア心​​の中を、代わりに拒否する、エラーが発生した場合に解決するために、その子の約束の原因となります。つまり、HTTP呼び出しのいずれかが拒否された場合は、$q.all()を使用して作成された親の約束は解決されます。エラーハンドラで約束を解決しないようにするには、$q.reject(someOptionalValue)を返します。

ServiceName.endpoint1().success(...).error(e => { alert(e); return $q.reject(); });