16
我有一系列行，每個行有一個複選框。每行有幾個輸入。我已經有了驗證，要求在所有行中至少有一個複選框被選中。但是，我至今不能要求輸入值僅用於檢查複選框（es）。如果選中複選框，則需要輸入值
的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"**
在每個相應輸入中。多謝，夥計！！現在如何解決我的原始問題，哈哈！
希望我能正確理解您的問題 - 對於屬於第一列中的複選框已選中的行的所有輸入字段，您希望輸入是強制性的嗎？ – callmekatootie 2013-04-04 16:58:52
請不要將**「SOLVED SOLVED小號OLVED「**或您的問題的答案......它打破了該網站的嚴格問答格式。我們知道它已經解決，因爲我們可以在下面看到您的答案。編輯。謝謝。 – Sparky 2013-04-04 22:25:02