根据所选的复选框返回结果数组

时间:2017-10-10 21:13:58

标签: javascript angularjs

我有不同的复选框,它们也有不同的端点。我想根据真实的复选框相应地调用端点,并将所有结果返回到一个数组中以进行进一步过滤。到目前为止,我在网上找到的资源要求我使用$ 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")
   });
}

1 个答案:

答案 0 :(得分:0)

$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()创建的父承诺仍将解析。为了避免在错误处理程序中解析promise,请返回$q.reject(someOptionalValue)

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