my code is as below,
vm.dtColumns.push(DTColumnBuilder.newColumn('id').withTitle('<input name="select_all" value="1" id="example-select-all" type="checkbox" ng-change="checkedAll()" />').renderWith(actionHtml).withOption('orderable', false));
my function is as below,
$scope.checkedAll = function () {
alert();
}
but on checkbox change this function is not working
Please help me to resolve above
Might be due to the fact that you don't have an ng-model on that input.
The documentation states that ng-model has to be present for the ng-change to work.
The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.
...
Note, this directive requires ngModel to be present.
Related
Using Angular 1.x I have two groups of select boxes, both call a function on change:
ng-click="checkOneOptionSelected()"
In my controller I would like to know which group of select boxes called the function:
$scope.checkOneOptionSelected = function(value){
.. do something...
}
Is there a way to get the value of ng-model dynamically without passing a string as a parameter, perhaps using 'this' or similar. HArdcoding the value as a param will work but feels hacky?
When using the ng-model directive, the code should use the ng-change directive instead of ng-click.
<select ng-model="$ctrl.sel1" ng-change="$ctrl.updateSel('sel1',$ctrl.sel1)"
ng-options="...">
<option value="">Select sel1</option>
</select>
<select ng-model="$ctrl.sel2" ng-change="$ctrl.updateSel('sel2',$ctrl.sel2)"
ng-options="...">
<option value="">Select sel2</option>
</select>
To share the same update function, simply add arguments to indicate the source of the change.
this.updateSel = function (id, val) {
console.log(id,val);
//...
};
The ng-click directive fights with the ngModelController. The ng-change directive uses the $viewChangeListeners property of the ngModelController. The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.
For more information, see
AngularJS ng-change Directive API Reference.
You may pass builtin $event object (mentioned in ng-click reference in arguments), which is iQuery event object.
ng-click="checkOneOptionSelected($event)"
Then use its target field to reason about what was clicked:
$scope.checkOneOptionSelected = function(event){
.. do something with event.target, e.g...
if(event.target.id == 'Option123') {
...
}
}
I have a T/F property called "valid" returning from an API call. I want to accurately display it as a checkbox, as well as allow the user to set/unset it. Setting or unsetting it will make a SAVE call.
{{vm.selectedQuestion}}
<md-checkbox
aria-label="Confirmed"
ng-model="vm.selectedQuestion.valid"
ng-click="vm.setReviewed()"
ng-checked="vm.selectedQuestion.valid">
Valid
</md-checkbox>
.
vm.setReviewed = function () {
vm.selectedQuestion.valid = !vm.selectedQuestion.valid;
// a bunch of other stuff
};
If the question gets loaded with value: true, then I see the checked box. If I uncheck the box, the valid property disappears from the object completely.
I know I'm doing something wrong with the ng-model and the ng-checked, but I've tried every combination I can think of.
Astonishingly, the angular docs and examples do not seem to address this simple case as far as I have found.
I would simply change it to:
{{vm.selectedQuestion}}
<md-checkbox
aria-label="Confirmed"
ng-model="vm.selectedQuestion.valid"
ng-change="vm.setReviewed()">
Valid
</md-checkbox>
with the function:
vm.setReviewed = function () {
// a bunch of other stuff depending on the value of vm.selectedQuestion.valid
};
Usually there is no need to over-complicate it (unless there is something about md-checkbox that I am not aware of). There is also no need to manually toggle the value in the ng-change (it's already changed by ng-model, and the value of vm.selectedQuestion.valid you see in the function is already after the change).
Here is the link for the docs of md-checkbox directive with a clear example:
https://material.angularjs.org/latest/api/directive/mdCheckbox
And the ng-change is as ng-change does, until angular goes v2, and then all bets are off. :)
A few notes on directives in question (with input from OP comment):
ng-click happens before the change of the ng-model and the checkbox in the element
ng-change happens after the change in the ng-model and the element
ng-checked is used only to set the checked attribute of the element if it's evaluated to truthy - should not be used alongside ng-model
Try following snippet
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-checked="name" ng-model="name">{{name}}</div>
</div>
</div>
Hope this will help you
My view has
<input type="checkbox" class="check_box" ng-model="campaign.paused"
ng-click="CampaignPauseClicked(campaign, $event)" />
<p>campaign.paused == {{campaign.paused}}</p>
with the <p> being for debugging. It shows false, as it shoudl, given the data, but in the controller
$scope.CampaignPauseClicked = function(campaign, $event)
{
campaign.paused = ! campaign.paused;
when I breakpoint on the first code line, the value of campaign.paused is true (!).
I have searched the code and campaign.paused is not being written elsewhere.
Any idea what could be happening here?
[Update] I am using an ng-click fucntion, which I have not shown in its entirity, because I need it to "swallow" the $event and prevent it from propogating to the parent.
That's because ng-model is updating the value when you click the checkbox. You're undoing what Angular is doing for you.
If you want to do it by yourself in your $scope.CampaignPauseClicked function, remove the ng-model part from the html.
Otherwise, you can let Angular do its thing, leave the ng-model="campaign.paused" clause, and remove the first line from your ng-click callback.
Also you can replace the ng-click with the ng-change directive since you are using a checkbox.
ng-change will run everytime the checkbox state is changed (checked/unchecked)
<input type="checkbox" class="check_box" ng-model="campaign.paused"
ng-change="CampaignPauseChanged ($event)" />
<p>campaign.paused == {{campaign.paused}}</p>
And in your controller:
$scope.CampaignPauseChanged = function(event)
{
console.log(campaign.paused)
console.log(event)
}
Another option would be the ng-checked directive here is an example in this plunker. As you can clearly see the checkbox model returns true only if it is checked.
I have a doubt related to ng-blur and ng-focus. we have controller binded to ng-focus and ng-blur like below:
on view:
<input ng-focus="vm.onFocus" />
on controller:
vm.onFocus = function ($event) {
return focus({event: $event});
};
function focus(event) {
// do something actual implementation contains some condition
return true;
}
Now in above case return is added,
Any one have any idea whether these returns do really angular resolves?
No, Angular will not invoke focus function like this. It will properly evaluate vm.onFocus expression, and this expression will resolve to a function, no problem here. However, this function is not being called (missing ()).
You could simply make onFocus reference focus function:
vm.onFocus = focus;
and make sure you call it:
<input ng-focus="vm.onFocus()" />
Although, it is still possible to invoke it even when ng-focus="vm.onFocus" is used, but I would not recommend it.
I have used ng-paste for textarea while pasting the link in textarea, i am calling a custom function to store that value. Please refer following code
<textarea rows="1" ng-model="myObj.content"
ng-paste="getContent(myObj)">
</textarea>
$scope.getContent = function(a){
console.log(a.content);
}
But in console always I am getting undefined value. How can I get my object value?
Passing model to function does not really make sense since you have already specified ng-model, so it's value will be updated as user types something into the textbox. If you want to track changes you can setup a $watch for your model or specify a function using ng-change.
If you want to know what user pasted, then that's another story. Handling ng-paste can be tricky. To access the actual event, easiest is to include jQuery before angularjs and then do e.g. following:
HTML template
<textarea rows="3"
placeholder="copy/paste here..."
ng-init="content = null"
ng-model="content"
ng-paste="paste($event.originalEvent)">
</textarea>
Controller
$scope.paste = function (event) {
var item = event.clipboardData.items[0];
item.getAsString(function (data) {
console.log(data);
});
};
Related plunker here http://plnkr.co/edit/ea5y5j
Simply use $timeout to call your paste callback after the model has been updated.
$scope.getContent = function(a){
$timeout(function () {console.log(a.content)});
}