I am trying to get all the checked checkboxes from the ng-model, but the one that were checked by default are not being added to the model:
<div ng-repeat="(key,a) in arr" class="checkbox" name="myArray[]">
<label>
<input ng-init="" ng-checked ="checkInArray(a.id, array2) == '1'" type="checkbox" value="a.id" ng-value="a.id" ng-model ="m.names[a.id]" >{{a.title}}
</label>
</div>
In Angularjs:
$scope.checkInArray = function(v, array){
var checked;
angular.forEach(array, function(value, key){
if(v == array[key]['id']){
checked= '1';
}
});
return checked;
};
the function is working fine and the checkboxes that i want are getting selected by default but on submit the model is not taking the defaultly checked, I have to uncheck and check again.
Whats wrong here?
Related
I am using searchable-multiselect in angular js, ng-required=true is not working in multiselect.How to apply ng-required in MultiSelect ?
<searchable-multiselect display-attr="name" selected-items="users.user" all-items="allusers" ng-required=true
add-item="add(item,user)" remove-item="remove(item,user)" ng-model="dropdownValues">
You can only apply ng-required onto directives that require ng-model. Looking into the searchable-multiselect directive, it doesn't require ng-model nor does it have any required configuration.
The easiest way to do form validity on this would be to add a hidden input that contains something you can do validity on. In this case you can use the model object that you're storing the data on. In the example below, we're checking the length of the selected items and requiring there be a minimum of 1 entry.
<input
style="display: none;"
type="number"
ng-model="dropdownValues.length"
ng-required="true"
min="1" />
Working Plunkr: http://next.plnkr.co/edit/gkxUvPVK0NkdOewj
Use the following :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div
multi-select
input-model="batch_timing.days"
output-model="resultData"
button-label="acronym"
item-label="acronym symbol name"
tick-property="ticked"
helper-elements="all none reset"
required name="days">
</div>
<button ng-click="validation()">submit</button>
$scope.resultData = [];
$scope.validation = function () {
if($scope.resultData === null || $scope.resultData == '') {
return false; // not validated
} else {
return true; // validated
}
}
Is there any way to shift + click to select multiple checkboxes using this directive like we have in Gmail?
Example:
Click on 1st row's checkbox.
Holding down SHIFT key.
Click on 10th row's checkbox.
Result: the first 10th rows will be selected.
Here is an example of how to do it, the selectors will need to be changed to something more specific when it is used in something with more that just the check-boxes.
It works by scanning all the inputs and seeing if it is checked, if it is it toggles a boolean that will cause each element to toggle to checked until the this matches the clicked item then breaks out of the loop as it doesnt need to check any more.
$("[type='checkbox']").click(function(evt) {
if (evt.shiftKey){
let item = $(this);
let hitfirstChecked = false;
$("#wrapper-check input").each(function(){
if($(this).is(":checked")){
hitfirstChecked = true;
}
if(hitfirstChecked){
$(this).prop('checked', true);
}
if(item.is($(this))){
return false;
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="wrapper-check">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<input type="checkbox" value="6">6
<input type="checkbox" value="7">7
<input type="checkbox" value="8">8
</span>
I am trying to make checkbox work like radio button.
When one checkbox is checked another checkbox should automatically uncheck.
Can anyone show me how to do it.
Example
<label ng-repeat="role in roles">
<input id="{{role.text}}" type="checkbox" onbeforesave="validateRequired($data)"
ng-click="$last&&mytest(checked)" ng-disabled="user.text"
checklist-model="user.roles" checklist-value="role.text"
ng-init="user.roles=false"/>
{{role.text}}
</label>
// HTML in INPUT
ng-true-value="{{role.id}}" ng-false-value="" ng-model="result.id"
// Controller
$scope.result = {};
You can check $index like that
$scope.check = function (index) {
$scope.type = index;
}
$scope.type === $scope.result.id
>>>>> true
its working :)
I need to display the checkbox checked if value is 1 in database as the page load in my new ionic framework application.
I use ng-model and ng-init as below:
<input type="checkbox" ng-model="c.checked" ng-init="c.checked = new1" ng-click="clickmenu();" style="width: 28px;"> Menu
And in JavaScript file:
$scope.c = {};
$scope.new1 = true;
But the checkbox remains unchecked.
I referred this link but is not working
http://plnkr.co/edit/OaKnDNRSVoK18IbpDlTk?p=preview
Am I doing something wrong?
Use ng-checked instead (Plunker):
<label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/>
<input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">
Can you try this method, It worked for me
<label class="checkbox">
<input type="checkbox" ng-model="registrationForm.checkbox" required="required">
</label>
In your controller
if(!$scope.registrationForm.checkbox)
{
$ionicPopup.alert({
template: "Please accept the Terms and Conditions",
title: 'Error',
});
return false;
}
I want to restrict user to uncheck check-boxes if minimum three are unchecked. He would not be able to uncheck anymore check-boxes if any three are already unchecked.
Here is the code.
http://jsbin.com/corecetepa/1/edit
You could do something like
<input ng-change="!option.selected && permissions.headers | filter: {selected: true}).length<=3 && option.selected= true" type="checkbox"
ng-model="option.selected"
ng-checked="option.selected"/>
{{ option.title }}
OR
You could move the same logic to controller method.
Markup
ng-change="changeCheckbox(option)
Controller
$scope.changeCheckbox = function (option)
{
if(!option.selected && $scope.$eval('permissions.headers | filter: {selected: true}).length<=3'))
option.selected = false;
}
You can do like this,
<label ng-repeat="option in permissions.headers">
<input ng-click="checkPermission()" type="checkbox"
ng-model="option.selected"
ng-checked="option.selected">
{{ option.title }}
</label>
$scope.checkPermission=function(option){
var lengthTemp=($filter('filter')($scope.permissions.headers,{'selected':true})).length;
if(lengthTemp<3) {
option.selected=!option.selected;
}
};
}
$filter('filter')($scope.permissions.headers,{'selected':true})).length will filter those options in permissions.headers for which checkbox is selected.
I hope this is what you are looking for.