<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();
}
}
Related
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 have the following view
<tr ng-repeat="item in items">
<td>
<input type="radio" name="{{item.GroupName}}" data-ng-value=" {{item.BooleanValue}}" />
{{bookmark.BooleanValue}}
</td>
The above shows the text value of bookmark.BooleanValue after the radio button as true but the radio button is not selected.
I don need any complex binding to the viewmodel. The requirement is to make a DB call on selection (which I will get to once I can get the binding sorted
Any help?
You use ng-value in conjunction with ng-model. ng-model specifies the property the radio button is bound to and ng-value is the value given to the bound property when that radio button is selected. See the docs.
<tr ng-repeat="item in items">
<td>
<input type="radio" name="{{item.GroupName}}" ng-model="item.BooleanValue" ng-value="true"/>
{{item.BooleanValue}}
</td>
I want to implement select all checkbox (for multiple delete).
This is my View script:
<input type="checkbox" name="chk_all" id="chk_all" ng-click="checkAll(this)" /> Select All
<table>
<tr ng-repeat="user in allUsers">
<td><input type="checkbox" ng-model="list" name="list[]" class="chk_all" value="{{user.user_id}}" id="{{user.user_id}}" ng-checked="checkedAll" /></td>
<td>{{user.username}}</td>
<td>{{user.fname}}</td>
<td>{{user.lname}}</td>
<td>{{user.mobile}}</td>
<td>{{user.email}}</td>
<td><a title="Edit User" href="#/edit_user/{{user.user_id}}" ><span class="fa fa-pencil"></span></a> | <a title="Delete User" id="" style="cursor:pointer;" ng-click="delete_user(user.user_id)" ><span class="fa fa-trash-o"></span></a></td>
</tr>
</table>
On "chk_all" checkbox following all checkbox should checked or unchecked.
I want to delete selected users on button click. So how can i get selected user id's on http post method.
Script written as:
$scope.testFunction=function(params)
{
$http.post("../admin/users/testFunction",{'params' : params})
.success(function (data, status, headers, config)
{
console.log(data);
alert(1);
})
.error(function(data, status, headers, config){
});
}
controller function:
public function testFunction()
{
$data = json_decode(file_get_contents("php://input"));
print($data->params);
}
In testFunction (php function), how can I retrive selected user id's ?
Any solution?
Note: I have done it with javascript and php. Now application is going to convert into Angularjs, so it should be in angularjs.
You could give the object 'user' a property: 'checked', then the checkbox looks like: <input type="checkbox" name="list[]" class="chk_all" ng-model="user.checked" onclick="uncheck_select_all(this)" />. Then on your submit, you check for each user in allUsers whether user.checked == true and if so push that user to an array. Then put that array in your http post and handle deletion for each user in the array at the server side.
Update
In this plnkr I show what I meant with my answer + comments. This doesnt work if you simply copy-paste because I used some different namings. If you can't figure out the solution with this plunker, I'm afraid I did all I could. Note: You could replace the angular.forEach loops with regular for-loops for slightly faster performance.
Checkout ng-checked in the Angular Docs.
You can add an expression to every checkbox you want checked based on a $scope variable.
<input type="checkbox" name="chk_all" id="chk_all" ng-click="checkAll(this)" />
<input type="checkbox" name="chk_1" id="chk_1" ng-checked="checkedAll" />
<input type="checkbox" name="chk_2" id="chk_2" ng-checked="checkedAll" />
<input type="checkbox" name="chk_3" id="chk_3" ng-checked="checkedAll" />
In your controller you would have this:
$scope.checkAll = function() {
$scope.checkedAll = true;
}
This will set the $scope.checkedAll variable to true making the ng-checked expression true, which will check all checkboxes using that expression.
I changed the onchange attribute to ng-click as well.
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.
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.