取消选中复选框与提交 - AngularJS答案

【问题标题】：Uncheck checkbox with submit - AngularJS取消选中复选框与提交 - AngularJS
【发布时间】：2014-11-19 12:43:11
【问题描述】：

我正在尝试使用提交按钮取消选中复选框。这个想法是当复选框被选中时显示按钮，当按钮被点击时复选框被取消选中并且按钮被隐藏。

HTML 页面：

<html ng-app="myApp" ng-controller="myCtrl">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script src="script.js"></script>
  <meta charset=utf-8 />
</head>

<body>
  <div ng-repeat="foo in boxes">
    <div>
      <input type="checkbox" name="cb" id="cb" ng-model="show" />{{foo}}
    </div>
    <div ng-show="show">
      <form ng-submit="submit()">
        <input type="submit" name="sumbit" id="sumbit" value="Hide" />
      </form>
    </div>
  </div>
</body>
</html>

JS：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.boxes = ['a','b','c'];

  $scope.submit = function(){
    $scope.show = false;
  }
});

在 Plukner 上：http://plnkr.co/edit/z9W0w18dkgYJ3D5Q3aR2?p=preview

感谢您的帮助！

【问题讨论】：

您的问题到底是什么？你能解释一下你遇到问题的地方吗？你有错误吗？有什么事吗？
如何取消选中带有提交按钮的复选框？我在提交函数中将 show 设置为 false，但 ng-model 无法识别 show 为 false 以取消选中复选框。我是在正确的道路上，还是以其他方式运作？

标签： angularjs checkbox

【解决方案1】：

问题是您使用单个变量来存储 3 个项目的状态，但 Angular 在 ng-repeat 迭代中为每个上下文创建了一个范围。通过将show 更改为一个数组并使用$index 引用它们中的每一个，主作用域中的show 数组被传递给所有三个子作用域并且没有冲突，所以它可以工作：

app.controller('myCtrl', function($scope) {
  $scope.boxes = ['a','b','c'];
  $scope.show = [];
  $scope.submit = function(){
    $scope.show = [];
  }
});

HTML

  <div ng-repeat="foo in boxes">
    <div>
      <input type="checkbox" name="cb" id="cb" ng-model="show[$index]" />{{foo}}
    </div>
    <div ng-show="show[$index]">
      <form ng-submit="submit()">
        <input type="submit" name="sumbit" id="sumbit" value="Hide" />
      </form>
    </div>
  </div>

在这里查看：http://plnkr.co/edit/kfTMaLTXWtpt7N9JVHAQ?p=preview

（请注意这是否正是您想要的，因为毫无疑问，但这足以让您入门）

更新

这是 Hide 仅取消选中“它自己的”复选框的版本（$scope.submit 现在接受 index 参数）：http://plnkr.co/edit/YVICOmQrPeCCUKP2tBBl?p=preview

【讨论】：

是的，这正是我想要的。我就是这样处理的，但我没有找到解决方案。非常感谢。
不客气！是的，它可能不喜欢你有 3 个模型双重绑定到单个变量的事实。此外，您的页面上有重复的 ID，请确保您也修复了该问题。
是的，这是主要问题。我会解决的。

【解决方案2】：

你需要更改html代码并简化为

使用简单的ng-click代替表单

<div ng-show="show">
    <input type="submit" value="Hide" ng-click="show = !show" />
</div>

【讨论】：