I have selectboxit component in my site. With next design:
And I need when I select first select box value render data to first column if select value from second select box render data to second column etc.
My html code:
<table>
<tr>
<td>
<div id="appVerFirst">
<select id="appVersionsFirst" ng-model="version" ng-change="compareVersionEvent(version, 1)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::fisrtScoreClass}} total-quality"> {{::fisrtScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::fisrtUsers}}</p> </div>
</td>
<td>
<div id="appVerSecond">
<select id="appVersionsSecond" ng-model="version1" ng-change="compareVersionEvent(version1, 2)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last-1">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::secondScoreClass}} total-quality"> {{::secondScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::secondUsers}}</p> </div>
</td>
<td>
<div id="appVerThird">
<select id="appVersionsThird" ng-model="version2" ng-change="compareVersionEvent(version2, 3)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last-2">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::thierdScoreClass}} total-quality"> {{::thierdScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::thierdUsers}}</p> </div>
</td>
</tr>
</table>
And event for change selectBox component:
var selectData = function (version) {
var currentData = null;
angular.forEach($scope.compareAppVer, function (data) {
if (data.version === version)
currentData = data;
});
return currentData;
};
$scope.compareVersionEvent = function (version, id) {
var data = selectData(version);
switch (id) {
case 1:
{
$scope.fisrtScore = data.qualityScore;
$scope.fisrtScoreClass = data.qualityScoreClass;
$scope.fisrtUsers = data.activeUsers;
break;
}
case 2:
{
$scope.secondScore = data.qualityScore;
$scope.secondScoreClass = data.qualityScoreClass;
$scope.secondUsers = data.activeUsers;
break;
}
default:
{
$scope.thierdScore = data.qualityScore;
$scope.thierdScoreClass = data.qualityScoreClass;
$scope.thierdUsers = data.activeUsers;
}
}
};
But it is not working, because in compareVersionEvent not transfer correct data,
means what if in second selectBox I select value 1
then in first selectBox I select value 1
he don't transfer to main compareVersionEvent.
Help me please fix this issue.
Try initialize version, version1 and version2 in JavaScript
and remove "::" in html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>SelectBoxIt demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
</head>
<body>
<select name="test">
<option value="SelectBoxIt is:">SelectBoxIt is:</option>
<option value="a jQuery Plugin">a jQuery Plugin</option>
<option value="a Select Box Replacement">a Select Box Replacement</option>
<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
var selectBox = $("select").selectBoxIt();
});
</script>
</body>
</html>
please visit this link http://gregfranko.com/jquery.selectBoxIt.js/
Related
How to hide div based on select the dropdown.
Here is the sample code I have written
<div>
<p>Course Type</p>
<div>
<select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType" ng-change="getOption(this)">
<option value="java" selected>Java</option>
<option value="angularjs">Angular js</option>
<option value="reactJs">React js</option>
</select>
</div>
</div>
<div ng-if="studentType">
<p>Attendence Days</p>
<div class="slice-item">
<input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur" ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
</div>
</div>
In controller i have written below code.
$scope.getOption = function(value) {
if (value.studentType = "angularjs") {
$scope.studentType = "false";
}
};
Can any one please guide me solving this problem?
What is the issue with your code?
Its purely the logical issue. You are checking ng-if="studentType" for showing the input container. Inside the change event you are using if (value.studentType = "angularjs"). This is not a condition checking, its assignment opertator. You have to use if (value.studentType == "angularjs") or if (value.studentType === "angularjs") to compare the value value.studentType with string "angularjs". In your scenario, the if statement will always assign "angularjs" to studentType and after that the code inside if will assign "false" to studentType. There is no need to do this in this way.
You could do this in multiple ways. I suggest two options here
Option 1: Inside the template check the value for studentType. If studentType is not angularjs then only display the input. So just add a condition in ng-if="studentType !== 'angularjs'". Here you dont have to write any logic inside the controller
Working Fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
// $scope.showInput = true;
// $scope.getOption = function (value) {
// if (value.studentType == "angularjs") {
// $scope.showInput = false;
// }
// };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<p>Course Type</p>
<div>
<select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType"
ng-change="getOption(this)">
<option value="java" selected>Java</option>
<option value="angularjs">Angular js</option>
<option value="reactJs">React js</option>
</select>
</div>
</div>
<div ng-if="studentType !== 'angularjs'">
<p>Attendence Days</p>
<div class="slice-item">
<input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur"
ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
</div>
</div>
</div>
Option 2: Inside the change function, check the value of selected option. Set a visiblity boolean based on the value of selected option. Make the input visible based on that boolean
Working Fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.showInput = true;
$scope.getOption = function (value) {
$scope.showInput = value.studentType !== "angularjs";
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<p>Course Type</p>
<div>
<select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType"
ng-change="getOption(this)">
<option value="java" selected>Java</option>
<option value="angularjs">Angular js</option>
<option value="reactJs">React js</option>
</select>
</div>
</div>
<div ng-if="showInput">
<p>Attendence Days</p>
<div class="slice-item">
<input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur"
ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
</div>
</div>
</div>
I have a roster program. I select a name of an employee, I select the dates and the sites he will be working on and the shifts if its day or night for each date and submit it to mysql. I managed to implement multidate selection but now I want to select multiple sites and shift type corresponding to the dates. I don't want them to mix up when they are submitted to the database.
Example
Name : James Date: 2020-12-16 Shift: Night Sitename : KFC
Name : James Date: 2020-12-17 Shift: Day Sitename : McDonald's
Name : James Date: 2020-12-28 Shift: Night Sitename : New Your City park
Name : James Date: 2020-12-30 Shift: Day Sitename : Airport
HTML:
<html>
<head>
<title>Roster </title>
<meta charst="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<!-- JS & CSS library of MultiSelect plugin 2020-12-15 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bootstrap/css/multiselect.css" />
<!-- Jquery Multiselect Musa -->
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<!-- jQuery-- multiselect -- >
<!-- jQuery library -->
<script type="text/javascript">
$(document).ready(function(){
var date_input=$('input[name="start_time"]'); //our date input has the name "start_time"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
multidate:true,
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: false,
};
date_input.datepicker(options);
});
</script>
<script type="text/javascript">
$(function() {
$('#sitenames').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
//alert($('#sitenames').val());
})
});
</script>
</head>
<body>
<!-- Form code begins -->
<form method="post" action="md.php">
<div id="peoplenames" style="padding:10px">
<select name="personname" id ="personname">
<option value="Mike">Mike</option>
<option value="Gupta">Gupta</option>
<option value="Messi">Messi</option>
<option value="Ronaldo">Ronaldo</option>
</select>
</div>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row" >
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group" > <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="start_time" name="start_time" placeholder="MM/DD/YYY" type="text" />
</div>
</div>
</div>
</div>
</div>
<div id="divshift" style="padding:50px">
<select name="shifttype[]" id ="shifttype" multiple="multiple" >
<option value="">Select day or Night</option>
<option value="Day">Day</option>
<option value="Night">Night</option>
</select>
</div>
<div style="padding:100px">
<select name="sitenames[]" id ="sitenames" multiple="multiple" >
<option value="bp">BP</option>
<option value="shell">Shell</option>
<option value="caltex">Caltex</option>
</select>
</div>
<div class="form-group" style="padding:150px" > <!-- Submit button -->
<button class="btn btn-primary " name="btnroster" type="submit">post</button>
</div>
</form>
<!-- Form code ends -->
<?php
// php codes
$start_time1 =(isset($_POST['start_time']))? trim ($_POST['start_time']):'';
$empid =(isset($_POST['personname']))? trim ($_POST['personname']):'';
if(isset($_POST['btnroster'])){ // button starts here
$start_time2 = explode(",",$start_time1);
foreach ($_POST['shifttype'] as $shifttype){ // shifts day anad night
foreach ($_POST['sitenames'] as $siteid){ // site
foreach($start_time2 as $start_time){ // dates foreach
$query ='INSERT INTO tbljobassignment(empid, siteid,shifttype,start_time)
VALUES
(:empid, :siteid,:shifttype,:start_time)';
$insert=$con->prepare($query);
$insert->execute(array(
':empid'=>$empid,
':siteid'=>$siteid,
':shifttype'=>$shifttype,
':start_time'=>$start_time));
} // site ide loop
} // End of foreach loop
} // First foreach ends here
} // second foreach eands here
} //
}//button ends here
?>
</body>
</html>
Hi I am developing one web application in angularjs. I have one checkbox and very next i have one dropdown. If i check checkbox then i want to make dropdown required. Wheneer i do following,
I click on checkbox-dropdown required validation will occur.
Whenever i uncheck on checkbox still my required validation will occur. I want to make required validation for dropdown only when checkbox is checked.
Below is my checkbox.
<div class="inputblock">
<label class="inputblock-label">{{ 'Military' | translate }}</label>
<label class="military">{{ 'Military' | translate }}</label>
<input type="checkbox" name="Military" placeholder="{{ 'Military' | translate }}" ng-model="Military" ng-change="statechanged(Military)">
</div>
Below is my dropdown.
<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}">
<label class="inputblock-label">{{ 'Rank' | translate }}</label>
<div ng-if="rankrequired==true">
<span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
</div>
<select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" required>
<option value="" label="rank">{{ 'Rank' | translate }}</option>
</select>
</div>
Below is my javascript code.
$scope.statechanged = function (Military) {
if (Military == true)
{
enablerankdropdown();
$scope.rankrequired = function () {
return true;
};
}
else
{
$scope.user.rank = $scope.rankList[0].value;
disablerankdropdown();
$scope.rankrequired = function () {
return false;
};
}
}
Whenever i uncheck the checkbox i dont want to have required field validator. Now i am getting required field validator after unchecking also. May i know why this is happening here? May i get some help in order to fix the above issue? Any help would be appreciated. Thank you.
You can use ng-required to achieve this. Assign the ng-model of your checkbox to ng-required of select.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<input type="checkbox" name="user" ng-model="user">
<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required ng-required="user">
<option value="">Select Service</option>
</select>
<span style="color:red" ng-show="myForm.service_id.$error.required">Select service</span>
<input type="submit"
ng-disabled="
myForm.service_id.$dirty && myForm.service_id.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.services = [
{ServiceID: 1, ServiceName: 'Service1'},
{ServiceID: 2, ServiceName: 'Service2'},
{ServiceID: 3, ServiceName: 'Service3'}
];
});
</script>
</body>
</html>
You can use ng-required="Military".
<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}">
<label class="inputblock-label">{{ 'Rank' | translate }}</label>
<div ng-if="rankrequired==true">
<span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
</div>
<select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" ng-required="Military">
<option value="" label="rank">{{ 'Rank' | translate }}</option>
</select>
</div>
On my home screen ,I seacrh some data by calling angular controller(SeacrhController),then I click on a button(Start) on home page,which open another tab.On clicking done button on second tab,that second tab is closed and parent page is refreshed.
I want to have data searched earlier on my parent page.Can anyone please tell,how I can achieve this.How can I maintain session.
I tried Cookies and localStorage ,but could not get things working.Any help pls.
common.js :
var myApp = angular.module('MyApp', []);
myApp.controller('SearchController', function($scope,$http) {
$scope.clientVO = {};
$scope.getClientDetail = function(bcidNo) {
var response=$http.get('/testWeb/rest/clientData/'+ id);
response.success(function(data) {
console.log("getActor data: " + angular.toJson(data, false));
$scope.clientVO = data;
})
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
}
});
home.html :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="../javascripts/common/common.js"></script>
</head>
<!--some code -->
<div ng-controller="SearchController">
<form class="content-left-body">
<div class="client-details">
<span class="content-right-header">Client Details</span>
<table>
<tr><td>
<label>Client ID:</label></td>
<td><input type="text" name="id" id="Search"
placeholder="Search" ng-model="id" class="search-box"/>
<img alt="Search" src="../images/search_img.png" ng-click= "getClientDetail(id);" style="margin-left:-15% ; margin-top:2.5%">
</td>
<td>
<div ng-show="clientVO.clientName==''"><label style="color:red">ID not found in database.</label></div>
</td>
</table>
<div>
<div>
<table style="width: 100%">
<tr >
<td><label>Client Name:</label></td>
<td><span ng-show="!clientVO.clientName">-</span><label ng-bind="clientVO.clientName"></label></td>
<td><label>AccNo:</label></td>
<td><input type="text" ng-disabled="!clientVO.clientName"></td>
</tr>
<tr >
<td><label>Contact Name:</label></td>
<td><span ng-show="!clientVO.contactName">-</span><label ng-bind="clientVO.contactName"></label></td>
<td><label>Validation Level:</label></td>
<td>
<select ng-disabled="!clientVO.clientName">
<option value="">-Please Select-</option>
<option value="">Level 1</option>
<option value="">Level 2</option>
<option value="">Level 3</option>
<option value="">Level 4</option>
</select>
</td>
</tr>
</table>
</div>
<div class="Data-details">
<div class="data">
<div class="content-left-body">
<span class="content-left-header">Data details</span>
<span class="content-left-header-small">Data classification</span>
<label id="clientClassification" ></label> <br><br>
<button id="btn-yellow" onClick=window.open("classification.html","fullscreen=yes");>Start</button>
</div>
</div>
</div>
</form>
<!---some code -->
</html>
I have this simple service to store data in localStorage (note that localStorage won't work here in SO)
angular.module('app', [])
.controller('AppCtrl', ['StorageSrv', function(StorageSrv){
StorageSrv.set('user', {first: 'John', last: 'Doe'})
console.log(StorageSrv.get('user'));
}]);
// This service can live in a separate file
angular.module('app')
.service('StorageSrv', ['$rootScope', function ($rootScope) {
var self = this,
prefix = 'your_prefix',
ls = window.localStorage;
self.set = function(key, val){
var obj = {};
_.set(obj, key, val);
ls.setItem(prefix, JSON.stringify(obj));
};
self.get = function(keyPath){
if (!keyPath || !_.size(keyPath))
return JSON.parse(ls.getItem(prefix));
else
return _.get(JSON.parse(ls.getItem(prefix)), keyPath, null);
};
self.delete = function(keyPath){
var key = prefix + '_'+_.trimStart(key, prefix);
var current = self.get(key);
_.unset(current, keyPath);
if (!_.size(current)){
self.update(key, {})
}
else {
self.update(key, current);
}
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl"></div>
Usually I use formName.inputName.$invalid to show error message input like this:
<input name="myInput" minlength="3" />
<span ng-show="myForm.myInput.$invalid">too short</span>
that won't be a problem.
But when I tried to validate checkbox,it seems difficult, there are the snippet at the end.
I want the effect that user should at least check one checkbox ,or you got the warning message.
How can I do that in a simple way at best?
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.formData.favoriteColors = [{
'id':'1',
'name':'red'
},{
'id':'2',
'name':'green'
},{
'id':'3',
'name':'blue'
}];
$scope.cList = [];
$scope.checkList = function(index){
if($scope.myForm.favoriteColors.$pristine){
$scope.cList.push($scope.formData.favoriteColors[index]);
}
else{
angular.forEach($scope.formData.favoriteColors,function(value,key){
if(value.checked){
$scope.cList.push(value.id);
}
});
}
console.log('cList:%o',$scope.cList);
};
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="lib/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes and Radio Buttons</h2>
<form name="myForm">
<!-- NAME INPUT -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline" ng-repeat="color in formData.favoriteColors">
<input type="checkbox" name="favoriteColors" ng-model="color.checked" ng-click="checkList($index)" required>{{color.name}}
</label>
<span class="danger" ng-show="myForm.favoriteColors.$invalid">Please check one color at least</span>
</div>
<!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
</form>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Sample Form Object</h2>
<pre>
dirty:{{ myForm.favoriteColors.$dirty }}
pristine:{{ myForm.favoriteColors.$pristine }}
valid:{{ myForm.favoriteColors.$valid }}
invalid:{{ myForm.favoriteColors.$invalid }}
error:{{ myForm.favoriteColors.$error }}
</pre>
</div>
</body>
</html>
Here is the live demo:http://jsbin.com/yigujoporu/1/
I use a count funtcion to update the number of checked checkbox.
Here is the live demo:http://jsbin.com/wowipi/4/edit?js,output
You can custom validation by another way
First, in your controller
$scope.cList = [];
$scope.checked = false;
$scope.checkList = function(index){
if($scope.myForm.favoriteColors.$pristine){
$scope.cList.push($scope.formData.favoriteColors[index]);
}
else{
if($scope.formData.favoriteColors[index].checked == true){
//checked
$scope.cList.push($scope.formData.favoriteColors[index]);
}else{
//uncheck
angular.forEach($scope.cList, function(value,key){
if($scope.formData.favoriteColors[index].id == value.id){
//remove it
$scope.cList.splice(key,1);
}
}
}
console.log('cList:%o',$scope.cList);
//new change
if($scope.cList.length >0) {
$scope.checked = true;
}else{
$scope.checked = false;
}
};
In your view
<div class="form-group">
<label class="checkbox-inline" ng-repeat="color in formData.favoriteColors">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors[$index].checked" ng-click="checkList($index)" required>{{color.name}}
</label>
<span class="danger" ng-show="!checked">Please check one color at least</span>
</div>