<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body class="container">
<div ng-controller="myCtrl as vm">
<div class="row">
<div class="col-md-4">
<!-- Radio Button Gender -->
<form name="vm.frmGender" class="well">
<h4>Gender</h4>
<div ng-class="{false: 'text-danger', true: 'text-success'}[vm.frmGender.$valid]">
Is Valid: {{vm.frmGender.$valid}}
, Gender: {{vm.gender}}</div>
<ul class="list-group">
<li class="list-group-item"><label><input type="radio"
name= "gender"
value="Male"
ng-model="vm.gender"
required /> Male</label></li>
<li class="list-group-item"><label><input type="radio"
name= "gender"
value="Female"
ng-model="vm.gender"
required /> Female</label></li>
</ul>
<div>It is required to provide the gender information.</div>
</form>
</div>
<!-- Animals -->
<div class="col-md-4">
<form name="vm.frmOne" class="well">
<h4 class="row col-md-12">
At least one is required:
</h3>
<div class="row">
<div class="col-md-12" ng-class="{false: 'text-danger', true: 'text-success'}[vm.frmOne.$valid]">
Is Valid: {{vm.frmOne.$valid}},
Selected : {{vm.selectedAnimals}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li ng-repeat='a in vm.animals' class="list-group-item">
<label><input type="checkbox"
ng-model="xyx"
ng-click="vm.toggleAnimal(a)"
ng-checked="vm.selectedAnimals.indexOf(a) > -1"
ng-required="vm.selectedAnimals.length == 0" />
{{a}}</label>
</li>
</ul>
</div>
</div>
<div >At least one animal should be selected but you can select any number of animals from the list, to test un-select all and see the id valid</div>
</form>
</div>
<div class="col-md-4">
<form name="vm.frmColor" class=" well">
<h4 class="row col-md-12">
At least 3 is required:
</h3>
<div class="row">
<div class="col-md-12" ng-class="{false: 'text-danger', true: 'text-success'}[vm.frmColor.$valid]">
Is Valid: {{vm.frmColor.$valid}}<br>
Selected :{{vm.selectedColors}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<label><input type="checkbox"
ng-model="vm.chkAll"
ng-checked="vm.colors.length === vm.selectedColors.length"
ng-click="vm.selectAllColors()" > Select/Clear All</label>
</div>
</div>
<div class="row">
<ulclass="list-group">
<li class="list-group-item"
ng-repeat="item in vm.colors">
<label> <input type="checkbox"
ng-model="xyz"
ng-checked="vm.selectedColors.indexOf(item.id) > -1"
ng-click="vm.toggleColor(item.id)"
ng-required="vm.selectedColors.length < 3"> {{item.color}}</label>
</li>
</ul>
</div>
<div class='row'>
<div class="col-md-12">
At least 3 items are required but you can select as many as you want<br>
Select all or clear all is used to select/deselect every items in the list
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module('myapp', []);
app.controller('myCtrl', function(){
var vm = this;
vm.selectedColors = [];
vm.colors = [{"id": 1, "color": "Red"},
{"id": 2, "color": "Orange"},
{"id": 3, "color": "Yellow"},
{"id": 4, "color": "Green"},
{"id": 5, "color": "Cyan"},
{"id": 6, "color": "Blue"},
{"id": 7, "color": "Indigo"}];
vm.toggleColor = function(id){
var index = vm.selectedColors.indexOf(id);
if(index == -1) {
vm.selectedColors.push(id);
}
else{
vm.selectedColors.splice(index, 1);
}
}
vm.selectAllColors = function(){
if(vm.chkAll == true)
vm.selectedColors = vm.colors.map(x=>x.id)
else
vm.selectedColors = [];
}
/***** Animals ****/
vm.selectedAnimals = ['Bear', 'Deer'];
vm.animals = ['Cat', 'Bear', 'Deer', 'Lion', 'Tiger'];
vm.toggleAnimal = function(animal){
var index = vm.selectedAnimals.indexOf(animal);
if(index == -1) {
vm.selectedAnimals.push(animal);
}
else{
vm.selectedAnimals.splice(index, 1);
}
}
})
/* Styles go here */
table tr td{
border: 1px solid #bbb;
padding: 10px 30px;
vertical-align: top;
white-space:nowrap;
}