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 :)
Related
<input ng-model="email" type="text" class="marginHalf" ng-hide="email==''" readonly>
When on edit button click, Show this so user ca add an email.
You need to have a flag in your controller to toggle on and off when your edit button is clicked.
$scope.editMode = false;
$scope.onEditButtonClick = function(){
$scope.editMode = true;
}
then you use a condition that checks this variable but I recommend using ng-if instead.
<input ng-model="email" type="text" class="marginHalf" ng-if="editMode" readonly>
Here is the difference between ng-if and ng-show/ng-hide.
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 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?
How do I identify the change in value of a "radio button" before the current value change?
In my application, I need to alert the User about the effects that changing the value of this radio button will cause in the rest of form.
I've tried using ngChange and ngClick, but the value of the radio button is always changed (to the new value) even before I can do something with the current value.
Example:
<form>
<label>Nivel de gestão</label>
<input name="gestao" type="radio" data-ng-model="nivelGestao" value="T" data-ng-change="mudarNivelGestao()">Tecnica
<input name="gestao" type="radio" data-ng-model="nivelGestao" value="O" data-ng-change="mudarNivelGestao()">Operacional
<input name="gestao" type="radio" data-ng-model="nivelGestao" value="I" data-ng-change="mudarNivelGestao()">Institucional
<table>
<tr>
<td>Id</td>
<td>Nome</td>
</tr>
<tr data-ng-repeat="gestor in gestores">
<td>{{gestor.id}}</td>
<td>{{gestor.nome}}</td>
</tr>
</table>
<script>
...
$scope.mudarNivelGestao = function() {
alert($scope.nivelGestao); // In this place the content has already been changed, but before I need to alert and ask if the User want continue, if "No" return to the last value, if "Yes" change the value and go ahead...
...
}
...
</script>
</form>
I answered a similar question here
Just surround the radio input with label and apply the confirm logic in labels ng-click event.
<label ng-click="confirmChange($event)"><input type="radio" ng-model="value" value="foo" ></label>
$scope.confirmChange = function(event) {
if(!confirm('sure?')) {
event.preventDefault();
}
};
You can use the mousedown event (which will fire before the click and change events).
E.g.:
<input type="checkbox" ng-model="option"
ng-mousedown="confirmOption($event)" />
$scope.confirmOption = function (evt) {
var confirmMsg = 'Are you sure you want to select this ?';
if (!$scope.option) {
var confirmed = confirm(confirmMsg);
$scope.option = confirmed;
}
};
See, also, this short demo.
I have 2 radio buttons like this, and 2 text boxes that should be enabled based on the choice on the radio buttons.
<input type="radio" name="type" ng-model="outputType" value="1"> Choice1 <br/>
<input type="radio" name="type" ng-model="outputType" value="2"> Choice2 <br/>
<td><input type="text" ng-model="name" value="name" ng-disabled="istypeSelected('1') " size="5"> Name <br/></td>
<td><input type="text" ng-model="date" value="date" ng-disabled="istypeSelected('2')" size="5"> date <br/></td>
and here is a button
<button class="btn" type="button" style="" ng-click="update()">update</button>
I want to run some sql query in the back end when user hit the button. But I need to know which of the radio buttons has been chosen also. How can I access it?
In your controller, you should simply be able to access $scope.outputType and that will take the value of the radio button (i.e. 1 or 2) and assign it to whatever variable you wish to assign it to.
i.e.
var myChoice = $scope.outputType;
http://docs.angularjs.org/api/ng/input/input%5Bradio%5D
EDIT
Hard to say what's up, because I couldn't see your controller. The following displays just fine in the console for me:
var myapp = angular.module('myapp',[]);
myapp.controller('FormCtrl', ['$scope',
function($scope) {
$scope.update = function() {
var myChoice = $scope.outputType;
console.log(myChoice);
};
}]);
And, you also need to assign which controller to your form element:
form ng-controller='FormCtrl'