Question

我正在使用角度，我正在尝试创建一个＆＃34;选择所有＆＃34;按钮。

我有一个项目列表，每个项目都有一个切换，我正在做的是，在更改时（每次切换从true（选中）变为false（未选中），我运行一个函数来创建一个数组，所选元素的所有ID。

这几乎完美，问题是我面临一些indexfOf方法的问题，以检查ID是否已经在数组中。

var isInArray;

isInArray = function(arr, id) {
  console.log("index of ", arr.indexOf(id));
  return arr.indexOf(id);
};


scope.evtSelectAll = function() {
  return angular.forEach(scope.listToDisplay, function(element) {
    element.copyTo = true;
    return scope.selectFromList(element.iID, element.copyTo);
  });
};

scope.selectFromList = function(id, copy) {
  if (copy === true && isInArray(scope.selected, id) === -1) {
    scope.selected.push(id);
  } else {
    scope.selected.pop(id);
  }
  console.log("scope.selected - ", scope.selected);
  if (scope.selected.length > 0) {
    console.log("Emitted event: can proceed!");
    scope.$emit('enough-elements');
  } else {
    console.log("Emitted event: can not proceed!");
    scope.$emit('not-enough-elements');
  }
  return scope.result = scope.selected;
};

我遇到的问题是数组（scope.selected）有多个ID。

让我们说，例如，我的scope.selected看起来像这样：

scope.selected = [2,3,4,7]

如果我点击全选，则不会添加任何内容（这是正确的）

现在，让我们说取消4和7，例如，我的范围现在看起来像这样：

scope.selected = [2,3]

如果我现在点击全选，我的结果如下：[2,4,7]。

我输了 3

我认为这是因为我的阵列没有一个项目？

感谢您的帮助。这也是解释问题的快速codepen。如果您检查控制台并使用切换器进行游戏，您应该能够立即看到我指的是什么。

提前致谢

Answer 1

感谢 Matthias 和 Christian Bonato 提供的建议。

最后，我解决了他们的两个建议，最终结果似乎按预期工作。

这是一个包含最终版本的codepen：http://codepen.io/NickHG/pen/KNXPBb

基本上，我改变了

scope.selected.pop(id);

与

$scope.selected.splice( isInArray($scope.selected, id),1);

在selectAll事件函数中，在向数组添加元素之前，我总是清空scope.selected[]

$scope.evtSelectAll = function() {
$scope.selected = []
angular.forEach($scope.list, function(element) {
  element.copyTo = true;
  return $scope.selectFromList(element.id, element.copyTo);
});

};

谢谢你的帮助！

Answer 2

我认为您的代码主要包含逻辑错误。您正在使用selectFromList功能取消选择（单独完成时）和全部选择（您不想用来取消选择）。

正如某人因某种原因指出现在删除了答案，pop.()函数不应该用任何参数调用（它只用于删除最后一个元素），你应该使用这样的拼接： $scope.selected.splice( isInArray($scope.selected, id),1);

除非您确实需要在全部选择上运行所发出的功能，否则您可以尝试这是您的答案：

var isInArray;

isInArray = function(arr, id) {
  console.log("index of ", arr.indexOf(id));
  return arr.indexOf(id);
};


scope.evtSelectAll = function() {
  return angular.forEach(scope.listToDisplay, function(element) {
    element.copyTo = true;
    if (isInArray($scope.selected, element.id) === -1) {
      $scope.selected.push(element.id);
    }
  });
};

scope.selectFromList = function(id, copy) {
  if (copy === true && isInArray(scope.selected, id) === -1) {
    scope.selected.push(id);
  } else {
    $scope.selected.splice(isInArray($scope.selected, id), 1);
  }
  console.log("scope.selected - ", scope.selected);
  if (scope.selected.length > 0) {
    console.log("Emitted event: can proceed!");
    scope.$emit('enough-elements');
  } else {
    console.log("Emitted event: can not proceed!");
    scope.$emit('not-enough-elements');
  }
  return scope.result = scope.selected;
};

现在，如果在scope.selected列表中找不到ID，则select all仅会添加到scope.selected。

indexof - 使用javascript检查某个值是否已在数组中）

2 个答案: