我有一系列行，每个复选框一个。每行都有几个输入。我已经有验证，要求在所有行中至少检查一个复选框。但是，我非常无法为输入的复选框选择一个值。
HTML：
<div style="width: 100%;"> <checkBoxgroup-Wheelbase min-required="1"> <table style="width: 100%"> <tr> <td> <table style="width: 97%;"> <tr> <th style="width: 220px;" class="wheelbaseHeaderCell">Wheelbase<br /><span style="font-weight: 400;">(choose min of 1)</span></th> <th class="wheelbaseHeaderCell">Payload<br />[ pounds ]</th> <th class="wheelbaseHeaderCell">Length<br />[ inches ]</th> <th class="wheelbaseHeaderCell">Height<br />[ inches ]</th> <th class="wheelbaseHeaderCell">Weight<br />[ pounds ]</th> <th class="wheelbaseHeaderCell">Turn Radius<br />[ feet ]</th> </tr> </table> </td> </tr> <tr> <td style="height: 5px;"></td> </tr> <tr> <td> <div style="height: 170px; overflow: auto;"> <table style="width: 100%;"> <tr class="rowGroup" ng-repeat="wheelbase in wheelbases" data-rowParent="wheelbase[wheelbase.Id]"> <td class="wheelbaseCell" style="padding-left: 10px;" id="{{wheelbase.Id}}"> <!--Wheelbase--> <label class="checkBox" for="{{wheelbase.Id}}" style="text-align: left; width: 200px;"> {{wheelbase.WheelbaseGrade}} - {{wheelbase.Inches}} inches <input ng-model="wheelbase.checked" id="wheelbase{{wheelbase.Id}}" type="checkBox" /></label> </td> <td > <!--Payload Capacity--> <span style="display: inline-block;" ng-controller="PayloadCapacitiesCtrl"> <input ng-model="payloadCapacity.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked" /> </span> </td> <td > <!--Length--> <span style="display: inline-block;" ng-controller="VehicleLengthCtrl"> <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> </span> </td> <td > <!--Height--> <span style="display: inline-block;" ng-controller="VehicleHeightCtrl"> <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> </span> </td> <td > <!--Weight--> <span style="display: inline-block;" ng-controller="VehicleWeightCtrl"> <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> </span> </td> <td > <!--Turning Radii --> <span style="display: inline-block;" ng-controller="TurningRadiiCtrl"> <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> </span> </td> </tr> </table> </div> </td> </tr> </table> </checkBoxgroup-Wheelbase> <span class="hint" style="margin: 0 0 0 -35px; text-align: center; width: 100%;"> <button style="padding-top: 5px; ;" class="addNew" ng-click="openDialog()"><i class="icon-plus"></i> [ add new wheelbase ]</button> </span>
要求至少一个复选框的指令：
.directive('checkBoxgroupWheelbase',function() {
return {
restrict: 'E',controller: function($scope,$attrs) {
var self = this;
var ngModels = [];
var minrequired;
self.validate = function() {
var checkedCount = 0;
angular.forEach(ngModels,function(ngModel) {
if (ngModel.$modelValue) {
checkedCount++;
}
});
console.log('minrequired',minrequired);
console.log('checkedCount',checkedCount);
var minrequiredValidity = checkedCount >= minrequired;
angular.forEach(ngModels,function(ngModel) {
ngModel.$setValidity('checkBoxgroupWheelbase-minrequired',minrequiredValidity,self);
});
};
self.register = function(ngModel) {
ngModels.push(ngModel);
};
self.deregister = function(ngModel) {
var index = this.ngModels.indexOf(ngModel);
if (index != -1) {
this.ngModels.splice(index,1);
}
};
$scope.$watch($attrs.minrequired,function(value) {
minrequired = parseInt(value,10);
self.validate();
});
}
};
})
有没有一个简单，优雅的方式来要求检查这些复选框的输入字段是必需的？通过“规则”在JQuery中看起来很直观，但是我没有找到一种方法来通过AngularJs来实现。有人建议我使用子表格，但我不能设想它的含义。
如果我不清楚：
对于检查相应复选框的任何行，该行的所有输入都需要具有值。所以，如果检查说第1,3和5行的复选框，则行1,3和5的输入需要值。如果选中一行的复选框，同一行的输入需要一个值。如果该行的复选框未选中，则不需要输入。在清理它之后，它让我觉得一个明智的事情将是所有输入被禁用，直到他们各自的轴距复选框被选中。
更新：
我想感谢user2104976让我想起一个更好的用户体验，只要在不检查相应的轴距复选框时确保输入值不被添加，那么我实现了
**"ng-disabled="!wheelbase.checked"**
在每个相应的输入中。多谢，伙计！！现在怎么解决我原来的问题，LOL！
解决了 ！！解决了 ！！解决了 ！！解决了 ！！
神圣的蝙蝠侠，这个多么优雅？
NG-需要= “wheelbase.checked”
以下是更新的HTML相关部分：
<table style="width: 100%;">
<tr class="rowGroup" ng-repeat="wheelbase in wheelbases" data-rowParent="wheelbase[wheelbase.Id]" style="padding-top: 10px;">
<td class="wheelbaseCell" style="padding-left: 10px;" id="{{wheelbase.Id}}">
<!--Wheelbase-->
<label class="checkBox" for="{{wheelbase.Id}}" style="text-align: left; width: 200px;">
{{wheelbase.WheelbaseGrade}} - {{wheelbase.Inches}} inches
<input ng-model="wheelbase.checked" id="wheelbase{{wheelbase.Id}}" type="checkBox" /></label>
</td>
<td >
<!--Payload Capacity-->
<span style="display: inline-block;" ng-controller="PayloadCapacitiesCtrl">
<input ng-model="payloadCapacity.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" id="payload{{wheelbase.Id}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" />
</span>
</td>
<td >
<!--Length-->
<span style="display: inline-block;" ng-controller="VehicleLengthCtrl">
<input ng-model="vehicleLength.Inches" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" />
</span>
</td>
<td >
<!--Height-->
<span style="display: inline-block;" ng-controller="VehicleHeightCtrl">
<input ng-model="vehicleHeight.Inches" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" />
</span>
</td>
<td >
<!--Weight-->
<span style="display: inline-block;" ng-controller="VehicleWeightCtrl">
<input ng-model="vehicleWeight.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" />
</span>
</td>
<td >
<!--Turning Radii -->
<span style="display: inline-block;" ng-controller="TurningRadiiCtrl">
<input ng-model="turningRadius.Feet" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" />
</span>
</td>
</tr>
</table>
使用ng-disabled =“！wheelbase.checked”
使用ng-required =“wheelbase.checked”& ng-class =“{‘formRequire’：wheelbase.checked}”
如果检查相应的轴距复选框，则这是条件类踢入输入：
.ng无效.formRequire {大纲：红色固体3px;}
