Angularjs 如果选中复选框，则需要输入值

我有一系列的行，每个行有一个复选框。每行有几个输入。我已经进行了验证，需要在所有行中至少选中一个复选框。但是，到目前为止，我无法要求输入仅对选中的复选框具有值

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实现这一点的方法。有人建议我使用子表单，但我无法想象它的实现

如果我不够清楚：

<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();
            });
        }
    };
})

对于选中相应复选框的任何行，该行的所有输入都需要有一个值。因此，如果选中了第1、3和5行的复选框，则第1、3和5行的输入需要值。如果选中某行的复选框，则该行的输入需要一个值。如果未选中该行的复选框，则不需要这些输入。在澄清这一点时，我认为明智的做法是禁用所有输入，直到选中各自的轴距复选框

更新：

<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();
            });
        }
    };
})

我要感谢user2104976让我想到了更好的用户体验，确保在未选中相应轴距复选框时不添加输入值，因此我实现了这一点

 **"ng-disabled="!wheelbase.checked"** 

---

在每个相应的输入中。谢谢你，伙计！！现在解决我原来的问题怎么样，哈哈

您可以使用所需的ng来完成此任务：

ng required=“轴距.已检查”

以下是更新后的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=“！轴距.已检查”

带有ng required=“wheelbase.checked”&ng class=“{'formRequire'：wheelbase.checked}”

如果选中了相应的轴距复选框，则输入的条件类如下：

.ng无效。formRequire{ 外形：红色实心3px；

---

}

希望我正确理解了您的问题-对于属于选中第一列复选框的行的所有输入字段，您希望强制输入？请不要在问题中输入“已解决”或答案。。。它打破了这个网站严格的问答格式。我们知道问题已经解决了，因为我们可以在下面看到您的答案。编辑。谢谢