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）

Demo Controller As，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

您的> head(dfs3) dates maxwind year 12 1982-01-13 57 1982 13 1982-01-14 47 1982 33 1982-02-03 65 1982 49 1982-02-19 79 1982 61 1982-03-03 49 1982 68 1982-03-10 55 1982函数正在执行与toggleSelection类似的工作，但ng-model的<{>> ng-model属性为selected在您的user代码中，但在Controller As版本中属于单数 $scope属性，因为JavaScript Prototype继承如何与基元一起使用。这是在绑定中不使用vm.selected导致意外结果的主要示例。

在这种情况下，.正在将ng-model从数组更改为布尔值，它正在级联到vm.selected函数中的错误，该函数现在看到的布尔值不会拥有exist财产。

在这种情况下，您的.indexOf代码正在执行其余代码逻辑所需的代码，而您实际上并不需要toggleSelection。

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

2 个答案: