gpt4 book ai didi

javascript - ng-click父div的子复选框

转载 作者:行者123 更新时间:2023-11-30 17:24:55 26 4
gpt4 key购买 nike

在 AngularJS 中如何让父 div 点击传播到它的子复选框? Checkbox 将具有 hidden 属性,因此我们需要允许父 div 成为可点击实体。

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:

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

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

请联系:here

我也尝试过在 ng-change 上使用 click function(),但我仍然无法正常工作。

最佳答案

您需要做的就是像这样在父 div 上添加一个 ng-click。如果您不使用 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>

否则只需使用一个函数:ng-click="toggle(value2)"

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

这是一个Plunker

关于javascript - ng-click父div的子复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24464181/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com