http://plnkr.co/edit/AxBJs2XICPtWaA7bup8G?p=preview
<li ng-repeat="d in data"><input type="checkbox"/>{{$index}}</li>
<button ng-show="checkismorethanone">Save</button>
I can't use ng-model because it will check all the checkbox. How can I know if there's any of the checkbox checked? I want to show the save button if anyone of the checkbox is checked, or hide the button if no more button is checked.
You can do something like this :
<li ng-repeat="d in data"><input type="checkbox" ng-model="d.val"/>{{$index}}</li>
<button ng-show="anyCheckBoxSelected()">Save</button>
And this in the controller file :
$scope.data = [{val:false, num:1 },{num:2, val: false},{num:3, val:false},{num:4, val:false}];
$scope.anyCheckBoxSelected = function() {
var checked = $filter("filter")($scope.data , {val:true} );
return checked.length;
}
Here is the plnkr, forked from your link :
http://plnkr.co/edit/VApxbuEBUljkJDjSusxw
Check demo: Plunker
You need an object, say results', to store themodelvalues of your selection. Useng-modelto bind the$index-thcheckbox toresults[$index]`.
<li ng-repeat="d in data"><input ng-model="results[$index]" value="{{d}}" type="checkbox"/>{{$index}}</li>
<button ng-show="checkismorethanone">Save</button>
{{ results | json }}
<button ng-show="showButton()">Submit</button>
In controller, The for loop iterates current selections to check whether some checkbox is checked. ng-show is true if any of the checkboxes is checked.
$scope.results = {};
$scope.showButton = function () {
for (var key in $scope.results) {
if ($scope.results[key]) {
return true;
}
}
};
Toggle the status of the submit button depending on the value of results.
You can just use a single variable to count the click,
If a checkbox is checked the increment the counter, if checkbox is not checked decrement the counter.
Show the button if counter count is greater then 0.
//index.html
<ul >
<li ng-repeat="d in data" >
<input type="checkbox" name="{{$index}}" ng-click="checkboxOnClick($event)" /> {{$index}}
</li>
</ul>
<button ng-show="checkCount">Save</button>
//app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [1,2,3,4];
$scope.checkCount = 0;
$scope.checkboxOnClick = function($event){
if( $event.target.checked){
$scope.checkCount++;
}else{
$scope.checkCount--;
}
};
});
Check the plnkr,
http://plnkr.co/edit/KolYTZjzPvlyUGNF6elZ?p=preview
Related
I want to include validation on certain fields. The validation should show messages only when a checkbox is checked. I am trying to achieve this in Angular
form.cshtml
<input type ="checkbox" ng-click = "mainControl.reportUpdates()">
<input type = "text" date-validator = "type.date">
<ul messages = "mainform['date'+$index].$error">
<li ng-message="required"> Required</li>
<li ng-message = "maxdatevalidator">Date cannot be greater than today
</li>
<ul>
App.js
_module.directive('dateValidator', ['$rootScope','$parse',function($rootscope,$parse)])
{
function maxDate(date)
{
var today = new Date();
if(date!=null)
return date>today
else
return true
}
return
{
require: 'ngModel',
link : function(scope,element,attrs,ctrl)
{
scope.$watch(attrs.ngModel,function(newValue,oldValue))
{
if(newValue!=oldValue)
{
var check_date=maxDate(newValue)
ctrl.setValidity('maxdatevalidator',check_date) ;
}
}
}
}
}
I would put an ng-show on the ul showing only when the checkbox is true.
First you'll need an ng-model for the checkbox:
<input type="checkbox" ng-click="mainControl.reportUpdates()" ng-model="reportUpdates">
Then you can add then ng-show to the ul:
<ul messages="mainform['date'+$index].$error" ng-show="reportUpdates">
Operation No 1:
I have one super check box label as "Select ALL", and 10 other check boxes. if the Select All check box is check , all other checkbox should be check. if Select ALL check box is unchecked the all other should be unchecked.
This working fine
Operation No 2:
In case If all the check boxes are checked, if i uncheck any one check box, the Select ALL check box being unchecked.
This working fine.
What I want is If 9 check boxes are check, only 10th and Select ALL are unchecked, When I check that 10th check box, the "Select ALL" check box is remaining unchecked state how to make it check if all other check boxes are checked.
Below image, when all check boxes are check.
if I uncheck any one among those 10 check boxes, "Select All" check box become Uncheck that's correct.
enter image description here
If I check the Action check box, all the check boxes are checked but "Select ALL" check box remains uncheck, it should be check because all the check boxes are checked.
enter image description here
I couldn't find how to do, if any one knows please help me.
My code is:
$scope.itemClicked = function($index){
if($index == 0){
for(var i=0; i<languagePreference.length; i++){
languagePreference[i].checked = languagePreference[0].checked;
}
}else{
languagePreference[0].checked = false;
}
};
<div class="list" ng-controller="LangPrefController">
<ion-checkbox ng-repeat="item in languagePreference"
ng-model="item.checked"
ng-click="itemClicked($index)">{{item.text}}
</ion-checkbox>
</div>
To achieve what you want you could do these things:
To select/deselect all the checkboxes, you can simply loop over the elements and setting all the checked properties to true/false.
To select/deselect this checkbox programatically, you can use Array.prototype.every() method, which returns if all checkboxes are selected or not, if all elements are selected that option will be/keep also selected, otherwise, it will be/keep deselected.
Here's a demo:
(function() {
'use strict';
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.languagePreference = [];
function loadData() {
var arr = [];
for (var i = 1; i <= 5; i++) {
arr.push({
"name": "Language " + i
});
}
return arr;
}
$scope.languagePreference = loadData();
$scope.itemClicked = function() {
$scope.selectedAll = $scope.languagePreference.every(function(item) {
return item.checked;
});
}
$scope.selectAll = function() {
$scope.languagePreference.map(function(item) {
item.checked = $scope.selectedAll;
});
}
}
})();
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<div class="checkbox" ng-repeat="item in languagePreference">
<label>
<input type="checkbox" ng-model="item.checked" ng-click="itemClicked()">{{item.name}}
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"> Select All
</label>
</div>
</div>
</body>
</html>
I am trying to print text on the page in a <h1> tag depending on whether a check box is checked or not.
$scope.EmailMe = function(email) {
if($scope.emailchecked == 1) {
$scope.test = "emailSent";
} else {
$scope.test = "nothing";
}
}
HTML is :
<input type="checkbox" ng-model="emailchecked" ng-change="EmailMe(1)">
<h1> #{{test}} </h1>
I have the text printing but the checkbox is not being checked. or allowing for change please help :)
Use ng-true-value & ng-false-value, so that will give you 1/0 value based on selection.
<input type="checkbox" ng-model="emailchecked"
ng-true-value="1"
ng-false-value="0"
ng-change="EmailMe(emailchecked)">
Demo Plunkr
Even if you don't use ng-true-value, but that would not kept you model value to 0/1. By default checkbox value is true/false.
HTML
<body ng-controller="MainCtrl">
<input type="checkbox" ng-model="emailchecked" ng-change="EmailMe()">
<h1> #{{test}} </h1>
</body>
Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.EmailMe = function() {
if($scope.emailchecked == 1) {
$scope.test = "emailSent";
} else {
$scope.test = "nothing";
}
};
});
http://plnkr.co/edit/EfIMMn7Be7QL258aUiXW
and in your code you are changing the emailchecked which is not required.
You need to change if(email = 1) to if(email == 1). One equal is missing
Plnkr: https://plnkr.co/edit/Tt96EE2rruy1HAudRVJR?p=preview
I have the following nested loops of checkboxes:
<ul>
<li ng-repeat="continent in destinations">
<input type="checkbox" ng-model="continent.selected">
{{continent.name}} ({{continent.countries_selected}} / {{continent.countries.length}}) - {{continent.all_selected}}
<ul>
<li ng-repeat="country in continent.countries">
<input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">
{{country.name}}
</li>
</ul>
</li>
</ul>
And this is the code that detects ($watch) whether some or all children checkboxes have been checked, if so, parent checkbox gets checked as well.
That works fine.
But, when I check the parent box, it doesn't check.
What I want to achieve is that when I check a parent checkbox, all its children get checked as well and when I uncheck the parent checkbox, all its children get unchecked.
$scope.$watch('destinations', function(destinations){
var total_selected = 0;
angular.forEach(destinations, function(continent){
continent.countries_selected = 0;
angular.forEach(continent.countries, function(country){
total_selected += country.selected ? 1 : 0
continent.countries_selected += country.selected ? 1 : 0
if (continent.countries_selected == continent.countries.length) {
continent.selected = true;
} else {
continent.selected = false;
}
});
});
$scope.select_all = function(continent){
continent.selected = true;
}
$scope.total_selected = total_selected;
}, true);
you can try it . call a function on change of continent value
<input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)">
and in controller: add another function
$scope.parentChange = function(index) {
angular.forEach( $scope.destinations[index].countries, function(country) {
country.selected = $scope.destinations[index].selected;
});
};
and may be no need to add ng-checked="continent.selected" for country checkbox.
use
<input type="checkbox" ng-model="country.selected">
instead of
<input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">
Plunker DEMO LINK
The ng-checked attribute in the checkbox takes in an expression. So you can give an expression with and/or conditions, as mentioned below to make it checked based on an expression.
<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>
You dont have to write a seprate function to do the computation when every child checkbox is clicked
Here is the example
First of all, happy thanksgiving to everyone of you !!
I have this plunker-> http://plnkr.co/edit/N2bs5xqmtsj3MmZKEI25?p=info
User selects all the three values and only then the 'Add' button is enabled for addition.
Once clicked, the entries selected are shown below using ng-repeat. I also a delete button button to every row which gets added. How can i ensure that the delete functionality works in this case. ? i.e. if i click delete, only that particular row will be deleted.
Secondly, if u have noticed during the first add, a single delete button is shown above the first row. how can i remove that?
I also want to save the selected files in the controller so i can give those data to the backend. How can i know which options have been selected by user.
here is the plunker code-
HTML
<div ng-controller="Controller">
<form name="form" novalidate>
<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)" ng-model="document" valid-file required>
<select name="singleSelect" ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray" required>
<option ng-if="contentarray.length > 1" value="" selected>Choose</option>
</select>
<select name="singleSelect1" ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array" required>
<option ng-if="content1array.length > 1" value="" selected>Choose</option>
</select>
<button ng-click="addItem()" ng-disabled="disableAdd || (form.$invalid && (!form.$valid && 'invalid' || 'valid'))">Add</button>
</form>
<div ng-repeat="item in items" ng-show="isvisible">
<a>{{item.name}}</a>
<a>{{item.content}}</a>
<a>{{item.content1}}</a>
<button ng-click="deleteItem()">Delete</button>
</div>
</div>
JS code
var app = angular.module('Select', []);
app.controller('Controller', function($scope, $timeout) {
/* for adding optional file based selection values selected by the user*/
$scope.isvisible = false; /* display 1st line when user clicks on add button*/
$scope.items = [{
}];
$scope.activeItem = {
name: '',
content: '',
content1: ''
}
$scope.fileNameChanged = function (el) {
$scope.activeItem.name = el.files[0].name
}
$scope.addItem = function () {
$scope.isvisible = true;
$scope.items.push($scope.activeItem);
if ($scope.items.length > 6) {
$scope.disableAdd = true
}
$scope.activeItem = {} /* reset active item*/
angular.element("input[type='file']").val(null); /* To clear the input type file selected for next selection*/
}
/* for showing select options and enabling add button only when both the options are selected*/
$scope.content = {};
$scope.content1 = {};
$scope.contentarray = ['2', '3'];
$scope.content1array = ['12', '121', '1233', '1211'];
$scope.trigger = function () {
$timeout(function () {
$('form.bad select').trigger('change');
})
}
});
I am referring to your deleteItem() and delete-button-problem:
You will have to implement your deleteItem() method in your controller. ng-repeat will automatically update your list, when you delete an item from the model ìtems, no need for angular.element. This works, because of two-way data-binding in Angular.
Add an id to your ìtems and use that to delete the item from the model e.g.:
$scope.addItem = function() {
//...
$scope.activeItem.id = $scope.items.length;
$scope.items.push($scope.activeItem);
//...
}
$scope.deleteItem = function(item) {
$scope.items.splice(item.id, 1);
}
In your ng-repeat you need to define your button like this:
<button ng-click="deleteItem(item)">Delete</button>
Your other problem is with the additional delete-button: That is displayed, because you initialize your model ìtems with an empty element. Initialize like this instead and the button will not be shown:
$scope.items = [];
Hope that helps