ng-click Parent div的子复选框

Question

How do you make a parent div click propagate to its child checkbox in AngularJS? 如何在AngularJS中使父div点击传播到其子复选框？ The Checkbox will have the hidden attribute, so we need to allow the parent div be the clickable entity. Checkbox将具有hidden属性，因此我们需要允许父div为可点击实体。

HTML: HTML：

  <body ng-app="checkboxApp">
    <div ng-controller="MainController">
      <h1>Hello Plunker!</h1>
      <form name="myForm">
        Value1:<input type="checkbox" ng-model="value1" /><br />
        Value2:<input type="checkbox" value="value-2" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
        <tt>value1 = {{value1}}</tt><br />
        <tt>value2 = {{value2}}</tt><br />

        <hr />

        <div class="btn btn-primary">
          Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
        </div>
        <div class="btn btn-primary" >
          Value2:<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
        </div>
      </form>
    </div>
  </body>

JS: JS：

angular.module('checkboxApp', []);

angular.module('checkboxApp')
  .controller('MainController', [ '$scope', function MainController($scope){
    $scope.value1 = true;
    $scope.value2 = 'YES'
  }]);

Plnkr: here Plnkr：在这里

I have tried a click function() as well on the ng-change, but I still can't get it working. 我也尝试过ng-change的click function（），但仍然无法正常工作。

Answer 1

All you need to do is add an ng-click onto the parent div like this. 您需要做的就是像这样在父div上添加ng-click。 This example would work if you did not use ng-true-value and ng-false-value. 如果您不使用ng-true-value和ng-false-value，则此示例将起作用。

<div class="btn btn-primary" ng-click="value1 = !value1>
  Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" ng-click="value2 = !value2>
  Value2:<input type="checkbox" ng-model="value2"/><br />
</div>

Otherwise just use a function: ng-click="toggle(value2)" 否则，只需使用一个函数：ng-click =“ toggle（value2）”

$scope.toggle = function(val) {
    if (val === "YES") {
        val = "NO";
    } else {
        val = "YES";
    }
}

Here is a Plunker 这是一个柱塞

ng-click Parent div的子复选框

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-06-28 06:26:20

ng-click Parent div的子复选框

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-06-28 06:26:20

解决方案1
2 已采纳 2014-06-28 06:26:20