ng-model is not updating the first time - javascript

I have a checkbox which bind with a ng-model:
<input type="checkbox" ng-change="toggleAll(globalChecked)" ng-model="globalChecked">
Whereas toggleAll will grab the globalChecked value and process other logic in my controller:
$scope.toggleAll = function(val) {
if ($scope.objects == undefined) {
return
}
for (var i = 0; i < $scope.objects.length; ++i) {
$scope.objects[i].checked = val;
}
}
However, for the firs time, when I click the checkbox, toggleAll get called but the val (or globalChecked value) is still false.
Just wonder did I miss anything here?

It seems you didn't miss anything, it works fine for me. Here is a sample plunker:
http://plnkr.co/edit/BbVs7pEEFGTunXVkxCMj?p=preview
If it doesn't work the first time, make sure to initialize the value of the first checkbox (ng-model="globalChecked" in your code).
<input type='checkbox' ng-click="checkAll(toplevel)" ng-model="toplevel">
<div ng-repeat="obj in objects">
<input type='checkbox' ng-model="obj.checked">
</div>
$scope.objects = [];
for(var i = 0; i < 100; i++) {
if (!$scope.objects[i])
$scope.objects[i] = {checked: false};
}
$scope.checkAll = function(val){
for(var i = 0; i < 100; i++){
console.log($scope.objects[i]);
$scope.objects[i].checked = val;
}
}

Related

By clicking one checkbox other checkbox should be disable

I've 2 columns with checkboxes when one column is checked all respective are checked likewise in 2nd column but the problem is here, client wants when One column of checkbox is checked then 2nd column will be disable or throw alert message to check only one column at a time?
function SelectAll1(headerchk, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = true;
}
}
}
}
else {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = false;
}
}
}
}
}
You can ch
I don't really know what you're trying to do without the HTML but here's a start you can build off.
var selected = $('.check:checked').length;
if (selected >= 1) {
$('.check').prop('disabled', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check" checked="checked">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
From the little info given I assume this:
SelectAll1 clear or set all checkboxes in column 1.
SelectAll2 clear or set all checkboxes in column 2.
headerchk is a checkbox when clicked clears or sets all.
Do this change:
After each line in the code where SelectAll1(headerchk, gridId) is called you change it to SelectAll1(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll2(!headerchk.checked, gridId)
After each line in the code where SelectAll2(headerchk, gridId) is called you change it to SelectAll2(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll1(!headerchk.checked, gridId)
You only showed me the code for SelectAll1, so I assume SelectAll2 is the same when you not yet know how to make them different. Correct me if this is not the fact!
Continue by change the function SelectAll1 to the following:
function SelectAll1(header_checked, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = header_checked;
}
}
}
}
The else-part and if is eliminated by moving the condition to the assignment that is eiher true or false. The .checked part is moved outside the function.
Do the same change in SelectAll2
Test if it works and report to me!

For loop through custom filter results

I have a list of applications, I have a custom filter for getting the unique values of a specified field. I ng-repeat out checkboxes for each of these unique values to filter a table.
I need to for loop using the values returned by the unique filter. This is so I can have a button which unchecks all of the checkboxes returned in the ng-repeat.
I have it working but it loops through ALL of the tables values (which is thousands) instead of just for the unique values.
Markup:
<div ng-repeat="cat in applications | unique : 'Category'">
<label>
<input name="abc" type="checkbox" ng-model="$parent.FCategory[cat.Category]" ng-value="cat" ng-init="$parent.FCategory[cat.Category]=true">{{ cat.Category }}
</label>
</div>
<input type="button" ng-click="uncheckAll()">Untick
JS, Unique Filter:
App.filter('unique', function () {
return function (collection, keyname)
{
var output = [],
keys = [];
angular.forEach(collection, function (item) {
var key = item[keyname];
if (keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
JS, uncheck all function:
$scope.uncheckAll = function () {
for (var i = 0; i < $scope.applications.length; i++) {
var item = $scope.applications[i].Category;
$scope.FCategory[item] = false;
}
};
The issue is 'for (var i = 0; i < $scope.applications.length; i++) {' loops for every single record, I can't figure out how to have '$scope.applications.length' only be for the unique filter results.
The best I can come up with (which doesn't work) is...
$scope.uncheckAll = function () {
var a = $scope.applications;
for (var i = 0; i < $filter('unique')(a,'Category').length; i++) {
var item = $scope.applications[i].Category;
$scope.FCategory[item] = false;
}
};
One way you could solve this, is to store the filtered results in a new scope variable (uniqueApplications), which is then passed into your uncheckAll function:
<div ng-repeat="cat in (uniqueApplications = (applications | unique : 'Category'))">
<label>
<input name="abc" type="checkbox" ng-model="$parent.FCategory[cat.Category]" ng-value="cat" ng-init="$parent.FCategory[cat.Category]=true">{{ cat.Category }}
</label>
</div>
<input type="button" ng-click="uncheckAll(uniqueApplications)">
You also need to modify your uncheckAll function:
$scope.uncheckAll = function (list) {
for (var i = 0; i < list.length; i++) {
var item = list[i].Category;
$scope.FCategory[item] = false;
}
};

how to display checked values in checkbox using angular array?

I've already accomplished selecting htc in home page and coming to another page. Now I want to display whether the selected store value and severdata match (in this case I need to show true). During the on submit event, I want to pass all selected values. I have tried the code below, but its not working for me.
$scope.Selctedstores =window.localStorage.getItem("selectedservices");
console.log($scope.Selctedstores);
//console i am getting htc
var serverData = ["Nokia", "Htc", "Samsung"];
$scope.items = [];
for (var i = 0; i < serverData.length; i++)
{
var modal = {
name: serverData[i],
selected: false
};
$scope.items.push(modal);
}
$scope.check = function()
{
var checkedItems = [];
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
checkedItems.push($scope.items[i].name);
}
}
console.log(checkedItems);
}
html
<div ng-controller="Test1Controller">
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected" /> {{item.name}}
</div>
<input type="button" name="submit" value="submit" ng-click="check()" />
</div>
Before pushing to items array check whether the item is present already in the selected store. If so, then assign selected as true. Hope this helps. Let me know if you have any problem
check updated fiddle
function TodoCtrl($scope) {
var serverData = ["Nokia", "Htc", "Samsung"];
var selectedStore = ["Htc"]
$scope.items = [];
for (var i = 0; i < serverData.length; i++)
{
var modal = {
name: serverData[i],
selected: false
};
if (selectedStore.indexOf(serverData[i]) >= 0) {
modal.selected = true;
}
$scope.items.push(modal);
}
$scope.check = function()
{
var checkedItems = [];
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
checkedItems.push($scope.items[i].name);
}
}
console.log(checkedItems);
}
}
Try
for(var i=0;i<serverData.length;i++)
{
var modal = {
name:serverData[i],
selected:($scope.Selctedstores !== null && $scope.Selctedstores.indexOf(serverData[i]) > -1) ? true : false
};

how to check checkboxes in javascript

I have three checkboxes in html.
In Javascript I have variable newspaper = "jang,News,Dawn";
Now I want to check the checkboxes based on newspaper values if it contain only jang then only jang check box should be checked if it contain jang,News,Dawn then all three checkbox should be checked.
The code I have written always checked last two checkboxes which is wrong.
My code is:
var newspaper = document.forms[0].newspaper;
var a = "Jang,News";
var news = ["Jang", "Dawn", "News"]
for (i = 0; i < news.length; i++)
{
if (a.indexOf(news[i]))
{
newspaper[i].checked = true;
}
}
<input type="checkbox" name="newspaper[]" value="Jang">Jang<br />
<input type="checkbox" name="newspaper[]" value="Dawn">Dawn<br />
<input type="checkbox" name="newspaper[]" value="News">The News
If you want to do it using Javascript only, you have to do some changes in your code :
Change the name of all the checkboxes to "newspaper" (without square brackets)
<input type="checkbox" name="newspaper" value="Jang"/>Jang<br />
<input type="checkbox" name="newspaper" value="Dawn"/>Dawn<br />
<input type="checkbox" name="newspaper" value="News"/>The News
Check indexOf return value is not equal to -1 :
if (a.indexOf(news[i]) != -1) {
newspaper[i].checked = true;
}
Here is the working demo.
var newspaper = document.forms[0]["newspaper[]"];
var a = "Jang,News";
for (i = 0; i < newspaper.length; i++)
{
if(a.indexOf(newspaper[i].value) > -1){
newspaper[i].checked = true;
}
}
Yeah, I would review your code, and the names of your elements. But here, this works.
http://jsfiddle.net/3qeeox0a/
Try this-
var newspaper = document.forms[0].newspaper;
var a = "Jang,News";
var news = ["Jang","Dawn", "News"]
for (i = 0; i < news.length; i++)
{
if (a.indexOf(news[i]) != 1)
{
newspaper[i].checked = true;
}
}
Fiddle:-http://jsfiddle.net/um0y5wrp/9/
Please change the code, and replace this:
if (a.indexOf(news[i]))
{newspaper[i].checked = true;
}
by:
for(j = 0; j < newspaper.length; j++){
if(newspaper[j].value == newspaper[i].value){
if (a.indexOf(news[i])){
newspaper[j].checked = true;
}
}
}

Javascript: Detect checked boxes isn't working with form with only 1 checkbox. Working with 2 or more

I have the function below. It gets the values from checked boxes and transfer it to a textbox. It is working... but only if the form has 2 or more checkboxes.
<script type="text/javascript">
function sendValue()
{
var all_values = '';
boxes = document.DataRequest.itens.length
for (i = 0; i < boxes; i++)
{
if (document.DataRequest.itens[i].checked)
{
all_values = all_values + document.DataRequest.itens[i].value + ","
}
}
window.opener.document.getElementById('emailto').value = all_values;
self.close();
}
</script>
<form name="DataRequest">
<input name="itens" type="checkbox" value="name1">
<input name="itens" type="checkbox" value="name2">
</form>
Am I missing something to make this work with only 1 checkbox?
When there is one item. it does not return array
function sendValue()
{
var all_values = '';
boxes = document.DataRequest.itens.length
if(boxes>1)
{
for (i = 0; i < boxes; i++)
{
if (document.DataRequest.itens[i].checked)
{
all_values = all_values + document.DataRequest.itens[i].value + ","
}
}
}
else
{
if (document.DataRequest.itens.checked)
{
all_values = document.DataRequest.itens.value
}
}
window.opener.document.getElementById('emailto').value = all_values;
self.close();
}
First, you need to give different names to your inputs :
<form name="DataRequest">
<input name="item1" type="checkbox" value="name1">
<input name="item2" type="checkbox" value="name2">
</form>
Using the same name to your inputs is technically possible in your case but a terrible practice as the name is normally what's identify for a form the different inputs.
Then, to access your inputs, you must use a different syntax. More than one version are possible but you can do this :
var boxes = document.forms['DataRequest'].getElementsByTagName('input');
var tokens = [];
for (var i=0; i<boxes.length; i++) {
if (boxes[i].checked) tokens.push(boxes[i].name+'='+boxes[i].value);
}
var all_values = tokens.join(',');
Note that the use of join avoids the trailing comma.
not sure how much compatibility you need with IE 6 - 8, but if that's not required you can use
function serializeChecked() {
var values = [];
var checked_boxes = document.querySelectorAll('form[name="DataRequest"] input[checked]');
for (var i = 0, l = checked_boxes.length; i < l; i++) {
values.push(checked_boxes[i].getAtrribute('value'))
}
return values.join(',');
}
function sendValue() {
window.opener.document.getElementById('emailto').value = serializeChecked();
}
If you do require IE support, use document.DataRequest.getElementsByTagName('input') instead of QSA and iterate through them to collect the values if they have the checked attribute.

Categories