Question

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

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

感谢您的帮助！

Answer 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现在接受索引参数）：http://plnkr.co/edit/YVICOmQrPeCCUKP2tBBl?p=preview

Answer 2

您需要更改html代码并将其简化为

而不是使用简单的ng-click

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

取消选中提交复选框 - AngularJS

2 个答案: