<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<!-- css file -->
<!--App file -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
<!-- External file -->
</head>
<body>
<div ng-controller="Ctrl" >
<form class="Scroller-Container" name="multipleCheckbox" novalidate >
<div ng-app>
<div ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.name]"
ng-required="!someSelected(formData.selectedFruits)"> {{val.name}}
</div>
<p class="error" ng-show="submitted && multipleCheckbox.$error.required">hata var hacı</p>
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="submit" id="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
</form>
</div>
</body>
</html>
// Code goes here
var app = angular.module('App', []);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedFruits = {};
$scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];
$scope.someSelected = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
}
$scope.submitForm = function() {
console.log($scope.formData.selectedFruits);
}
}
/* Styles go here */
.error{
color: red;
}