Question

我有3个复选框，如下所示：

<div class="conditions" data-ng-controller="SignUpController as vm">
  <div class="conditions-content">
    Lorem Ipsum ...
  </div>
  <ul>
    <li><input type="checkbox" name="condition1"></li>
    <li><input type="checkbox" name="condition2"></li>
    <li><input type="checkbox" name="condition3"></li>
  </ul>
</div>

Angular 1控制器：

function SignUpController() {

  var vm = this;

  vm.start = function () {      

  }    

}

当选中所有3个复选框时，我需要：
1.用班级conditions隐藏div;
2.调用控制器上的函数start()。

需要将所有条件设置为true。

我该怎么做？

谢谢

Answer 1

在将检查其值（通过ng-change设置）的所有3个输入上使用ng-model处理程序：

<div class="conditions" ng-class="{hidden: vm.hidden}" data-ng-controller="SignUpController as vm">
  <div class="conditions-content">
    Lorem Ipsum ...
  </div>
  <ul>
    <li><input type="checkbox" ng-model="vm.cond1" ng-change="vm.check()" name="condition1"></li>
    <li><input type="checkbox" ng-model="vm.cond2" ng-change="vm.check()" name="condition2"></li>
    <li><input type="checkbox" ng-model="vm.cond3" ng-change="vm.check()" name="condition3"></li>
  </ul>
</div>

在控制器中：

function SignUpController() {
  var vm = this;

  vm.hidden = false;

  vm.start = function () {

  };

  vm.check = function () {
    if (vm.cond1 && vm.cond2 && vm.cond3) {
      vm.hidden = true;
      vm.start();    
    }
  }
}

您还可以使用ng-show / ng-hide / ng-if有条件地隐藏容器<div>。

选中3个复选框后执行操作

1 个答案: