[ AngularJS group ]체크박스 검증
체크박스의 리스트가 있는데, 그 중 적어도 하나는 필수입니다.Angular를 통해 이 목표를 달성하려고 노력했습니다.JS 검증이 되었지만 문제가 있었습니다.다음은 내 코드입니다.
// Code goes here for js
var app = angular.module('App', []);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedGender = '';
$scope.gender = [{
'name': 'Male',
'id': 1
}, {
'name': 'Female',
'id': 2
}];
$scope.formData.selectedFruits = {};
$scope.fruits = [{
'name': 'Apple',
'id': 1
}, {
'name': 'Orange',
'id': 2
}, {
'name': 'Banana',
'id': 3
}, {
'name': 'Mango',
'id': 4
}, ];
$scope.submitForm = function() {
}
}
// Code goes here for html
<!doctype html>
<html ng-app="App">
<head>
<!-- css file -->
<!--App file -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<!-- External file -->
</head>
<body>
<div ng-controller="Ctrl">
<form class="Scroller-Container">
<div ng-app>
<form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required />{{val.name}}
</div>
<br />
<div ng-repeat="(key, val) in gender">
<input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" required />{{val.name}}
</div>
<br />
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
<br>
</form>
</div>
</body>
</html>
다음은 plunker 코드입니다.http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview AngularJS에서 이 작업을 수행한 적이 있는 사람 있습니까?이 체크박스를 필수로 하면 모든 체크박스의 값을 선택할 수 있습니다.이 문제는 Angular(각도)에도 설명되어 있지 않습니다.JS 매뉴얼
그룹 내에서 하나 이상의 항목을 선택해야 하는 경우 ng-required를 사용하여 동적 필수 속성을 정의할 수 있습니다.
성별 라디오 버튼의 경우, 이것은 간단합니다.
<input
type="radio"
ng-model="formData.selectedGender"
value="{{val.id}}"
ng-required="!formData.selectedGender"
>
선택한 과일을 저장하기 위해 어레이를 사용한 경우(배열 길이만 확인), 체크박스 그룹도 간단합니다.그러나 오브젝트에서는 필터 또는 컨트롤러의 함수를 사용하여 값이 true로 설정되어 있는지 확인해야 합니다.
$scope.someSelected = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
}
<input
type="checkbox"
value="{{val.id}}"
ng-model="formData.selectedFruits[val.id]"
ng-required="!someSelected(formData.selectedFruits)"
>
업데이트:
const someSelected = (object = {}) => Object.keys(object).some(key => object[key])
값이 0이면 false가 반환된다는 점도 유의하십시오.
Klaster_1의 답변에 감사드립니다.나는 이것을 이용하여 구축했습니다.ng-change체크박스에서 로컬 스코프 변수를 설정하기 위한 입력을 합니다.ng-required표현.이것에 의해, 의 실행이 방해됩니다.someSelected()모든 다이제스트에 대해서요.
다음은 이를 증명하는 plunkr입니다.http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/
여기 후세를 위한 HTML과 JS가 있습니다.
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<form class="Scroller-Container" name="multipleCheckbox" novalidate="">
<h3>What would you like?</h3>
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="!someSelected" /> {{fruit.name}}
</div>
<p style="color: red;" ng-show="multipleCheckbox.$error.required">You must choose one fruit</p>
</form>
<pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
</div>
</body>
</html>
angular
.module('App', [])
.controller('AppCtrl', function($scope) {
var selectedFruits = {
Mango: true
};
var calculateSomeSelected = function() {
$scope.someSelected = Object.keys(selectedFruits).some(function(key) {
return selectedFruits[key];
});
};
$scope.formData = {
selectedFruits: selectedFruits
};
$scope.fruits = [{
'name': 'Apple'
}, {
'name': 'Orange'
}, {
'name': 'Banana'
}, {
'name': 'Mango'
}];
$scope.checkboxChanged = calculateSomeSelected;
calculateSomeSelected();
});
파티가 늦었을지도 모르지만, 보고 있는 오브젝트의 배열이 있으면, 선택한 오브젝트의 배열의 길이만을 체크하는 솔루션이 효과가 있었습니다.
HTML
<div ng-repeat="vehicle in vehicles">
<input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length <= 0"> {{vehicle.model}} {{vehicle.brand}} <b>{{vehicle.geofenceName}}</b>
</div>
JS
$scope.vehicles = [{},{}] // Your array of objects;
$scope.car = {
ids: {},
objects: []
};
$scope.$watch(function() {
return $scope.car.ids;
}, function(value) {
$scope.car.objects = [];
angular.forEach($scope.car.ids, function(value, key) {
value && $scope.car.objects.push(getCategoryById(key));
});
}, true);
function getCategoryById(id) {
for (var i = 0; i < $scope.vehicles.length; i++) {
if ($scope.vehicles[i]._id == id) {
return $scope.vehicles[i];
}
}
}
이 솔루션에서 어떤 체크박스를 클릭했는지 알기 위해 모든 체크박스를 켜는 것을 이해합니다.하지만 제가 아는 바로는 이것이 (이해와 구현이) 가장 쉬운 해결책이며, 선택지가 한정되어 있다는 것을 안다면 매우 효과적입니다.보다 시간을 최적화하는 솔루션.위의 답변을 확인하십시오.
모든 체크박스 인스턴스를 통과하지 않고도 고객의 요구사항을 충족할 수 있습니다.여기 샘플 코드가 있습니다.
<script>
angular.module('atLeastOneExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.e = function(s){
eval(s);
};
}]);
</script>
여기 javascript eval 함수를 e함수로 포장하여 접속합니다.
<form name="myForm" ng-controller="ExampleController" ng-init="c=0">
<label>
Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
</label><br/>
<label>
Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
</label><br/>
value = {{checkboxModel.value}}<br/>
isAtLeastOneChecked = {{c>0}}
</form>
언급URL : https://stackoverflow.com/questions/19632933/angularjs-group-check-box-validation
'programing' 카테고리의 다른 글
| Larabel에서 최대 파일 크기를 검증하는 방법 (0) | 2023.03.03 |
|---|---|
| BeCalledWith()를 기대하는 개체를 전달하는 중 (0) | 2023.03.03 |
| WP rest api jwt 인증 (0) | 2023.03.03 |
| 필드에 문자열이 포함되어 있는지 확인 (0) | 2023.03.03 |
| mongo - 서버 127.0.0.1에 접속할 수 없음:127.0.17 (0) | 2023.03.03 |