[英]checkbox functionality in angular js
I have multiple text boxes in a row with five columns, and those are disabled by default and should be enabled if I check on a checkbox corresponding to that particular row. 我的行中有多个文本框,其中有五列,默认情况下是禁用的,如果我选中与该特定行相对应的复选框,则应将其启用。 With the following code I am able to enable all the textboxes by checking the first check box only. 使用以下代码,我可以通过仅选中第一个复选框来启用所有文本框。 But I need an individual operation for every row. 但是我需要对每一行进行单独的操作。
My controller code: 我的控制器代码:
$scope.checkEnable = function () {
console.log($('#check').prop('checked'));
$scope.enableText = !$('#check').prop('checked');
};
html: HTML:
<div class="row item-head" ng-repeat="item in area track by $index">
<div class="col-md-4 col-xs-4 check-box">
<input type="checkbox" id='check' ng-model="check" ng-change="checkEnable()" /> {{item.servicename}}
</div>
<div class="col-md-8 col-xs-8">
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="enableText" />
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="enableText" />
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="enableText" />
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="enableText" />
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="enableText" />
</div>
</div>
</div>
</div>
In this case you don't even need controller (and of course avoid using jQuery for such things). 在这种情况下,您甚至不需要控制器(当然,请避免将jQuery用于此类事情)。 You just use ngDisabled like ng-disabled="check"
: 您只需要像ng-disabled="check"
一样使用ngDisabled:
<div class="row item-head" ng-repeat="item in area track by $index">
<div class="col-md-4 col-xs-4 check-box">
<input type="checkbox" ng-model="check"> {{item.servicename}}
</div>
<div class="col-md-8 col-xs-8">
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="check">
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.