У меня есть ряд строк с одним флажком. С каждой строкой находятся несколько входов. У меня уже есть проверка, требующая проверки по крайней мере одного флажка во всех строках. Тем не менее, я до сих пор не могу требовать, чтобы входные данные имели значение ТОЛЬКО для отмеченных флажков.
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 требуют значения. Если отмечен флажок row, для этого же ввода строки требуется значение. Если флажок этой строки не установлен, эти входы не требуются. И, расчистив это, он заставил меня думать, что разумно было бы, чтобы все входы были отключены до тех пор, пока не будет установлен флажок соответствующей колесной базы.
Update:
Я хотел бы поблагодарить пользователя2104976 за то, что заставило меня задуматься о лучшем пользовательском опыте, так как убедитесь, что входные значения не добавлены, когда флажок соответствующей колесной базы не установлен, поэтому я реализовал это
**"ng-disabled="!wheelbase.checked"**
в каждом из соответствующих входов. Спасибо приятель!! Теперь как насчет решения моей оригинальной проблемы, LOL!!
