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.
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>
<select ng-model="Listbox" ng-options="build for build in builds" ng-change="show(Listbox); showtable(Listbox);showummary(Listbox);"style="width: 500px" id="lbox"></select>
Here on change of option i am calling all 3 functions but i want them to be called depending on which radio button is checked.
<tr><td >
<input type="radio" checked onclick="showF();">Summary
</td>
<td >
<input type="radio" onclick="showS();">Detailed Summary
</td>
</tr>
If summary is selected then only call show and showtable otherwise call showsummary. I can put them in radio buttion tag but then change in select option won't be deteced.
You can modify your ngChange to trigger a single function, as below:
<select ng-model="Listbox" ng-options="build for build in builds" ng-change="checkShow()"style="width: 500px" id="lbox"></select>
Then you change your radio buttons:
<input type="radio" value="summary" ng-model="radioSelected">Summary
<input type="radio" value="detailedSummary" ng-model="radioSelected">Detailed Summary
Note: Don't use onclick, use ngClick if you need to trigger a click event in Angular.
Finally, in your controller you can just check what's the option selected in radio:
$scope.radioSelected = 'summary'; // Default selection
$scope.checkShow = function() {
if ($scope.radioSelected === 'summary') {
show();
showTable();
} else {
showSummary();
}
}
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 :)
Here is my radio buttons code
<input type="radio" ng-model="choice.phone" ng-value="1" name="phone" ng-
click="setPhoneType('cell')"> cell phone<br/>
<input type="radio" ng-model="choice.phone" ng-value="2" name="phone" ng-
click="setPhoneType('Home')"> Home phone <br/>
Now when a user choose any of them then below radio button should be checked as default
<input type="radio" ng-model="choice.International" ng-value="1"
name="international" ng-click="setChoiceType('Inter')" ng-checked="choice.phone"> International call
The js code is as follow:
setPhoneType = function setPhoneType(phoneType) {
$scope.phone = phoneType;
$scope.setChoiceType('Inter');
return;
},
setChoiceType = function setChoiceType(callType) {
$scope.international = callType;
return;
},
The problem is that when I choose any phone then the Inter is checked automatically but later on the value is undefined, It goes to setChoiceType but after that choice.International is undefined. If I manually choose Inter (by clicking on it) it is fine.
Your radio buttons are bound to properties of the choice object. But, setPhoneType and setChoiceType update values directly on the scope - not the choice object. Also, I think you want to use value, not ng-value.
Here is plnkr.