使用 'ControllerAs' 时出错，但在 ng-repeat 复选框中使用“$scope”时工作正常

Question

当使用“$scope”语法时，检查单个复选框会正确输出其相应的对象名称，但是当将 'ControllerAs' 语法应用于相同代码时，检查单个复选框会异常生成错误

$scope.users = [{.....}] //using $scope syntax
$scope.selected = [];

$scope.exist = function(item) {
  return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item) {
  var idx = $scope.selected.indexOf(item);
  if (idx > -1) {
    $scope.selected.splice(idx, 1);
  } else {
    $scope.selected.push(item);
  }
}

在 ControllerAs 中使用上述代码的表示

vm.users = [{....}] //Using 'Controller As' Syntax
vm.selected = [];

vm.exist = function(item) {
  return vm.selected.indexOf(item) > -1;
}
vm.toggleSelection = function(item) {
  var idx = vm.selected.indexOf(item);
  if (idx > -1) {
    vm.selected.splice(idx, 1);
  } else {
    vm.selected.push(item);
  }
}

chrome 开发者工具中返回错误

TypeError: vm.selected.indexOf 不是函数在 GridController.vm.exist (gridController.js:37)

演示控制器作为，http://plnkr.co/edit/5auLDGbpyDFUcpPxBzNs?p=preview

演示 $Scope，http://plnkr.co/edit/2jz0ieeCWJE6tvzXK69A?p=preview

请问在这种情况下应用 Controller As 语法时可能是什么问题或者这可能是一个错误，谢谢

Answer 1

在您的 plunkr 中，您将 vm.selected 绑定到一个复选框；这告诉 angular 将其设置为布尔值。当您尝试对其调用 .indexOf 时，它会失败，因为默认情况下带有 ng-model 的复选框是 true 或 false.

看这里：https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Answer 2

您的 toggleSelection 函数与 ng-model 的工作类似，只是 ng-model 每个 都有一个 selected 属性 user 在您的 $scope 代码中，但在 Controller As 版本中是 singular vm.selected 属性，由于JavaScript 原型继承如何与基元一起工作。这是在绑定中不使用 . 会导致意外结果的主要示例。

本例中的 ng-model 正在将 vm.selected 从数组更改为布尔值，这会级联到 exist 函数中的错误，该函数现在看到的布尔值不没有 .indexOf 属性.

在这种情况下，您的 toggleSelection 代码正在执行其余代码逻辑所需的内容，您实际上并不需要 ng-model。

使用 'ControllerAs' 时出错，但在 ng-repeat 复选框中使用“$scope”时工作正常

Errors when using 'ControllerAs' but works fine when using '$scope' in ng-repeat checkbox

javascript

checkbox

angularjs

angularjs-ng-repeat

angularjs-controlleras