Angular checkbox input ng-click never called - javascript

In my Angular app, I have a form with checkbox inputs:
<div ng-repeat="partner in type.partners">
<label class="checkbox-inline">
<input type="checkbox" value="partner"
ng-checked="report.participatingPartners[$parent.$index].indexOf(partner) !== -1"
ng-click="toggleSelection($parent.$index, $index);">
<p><span></span>{{partner.name}}<p>
</label>
</div>
And in my controller, just to test this setup:
var vm = this;
vm.toggleSelection = toggleSelection;
...
function toggleSelection(typeId, partnerId) {
console.log("toggleSelection called");
console.log(typeId, partnerId);
}
This function never gets called when I click the checkbox or its label. Why is that?
I know it's not the controllerAs syntax because other functions are working fine.

The attribute you probably want to use is ng-change. The angular input directive does not have ng-clicked or ng-checked.
See docs.

By putting the function that you are trying to reference in the ng-click onto $scope rather than onto this the click event should bind as desired.
On the controller...
$scope.toggleSelection = toggleSelection;
function toggleSelection(typeId, partnerId) {
...
}
On your html...
<input type="checkbox" value="partner"
ng-click="toggleSelection($parent.$index, $index);">
Here is a simple Fiddle of it working.

You have written below code:
ng-checked="vm.toggleSelection($parent.$index, $index);"
But it should be:
ng-checked="toggleSelection($parent.$index, $index);"
Just remove "vm"

Related

Angular checkbox to filter data

I am showing FreeEvents using checkbox. I am passing the value to the filter as filter:filterFreeEvent . This is working fine.
But I want to avoid passing value in the filter rather I want to use a change event of a checkbox to filter.
Something like
<input type="checkbox" ng-model="showFreeEvent" ng-change($event)">
This is my JsFiddle example.
Has anyone done something like this?. Any help or suggestion would be appreciated.
Thanks in advance
You can also change a variable in the change-event only like this :
<input ng-model="changeValue" ng-change="showFreeEvent = showFreeEvent== false ? true : false" value="" type="checkbox" />
If the showFreeEvent is false, ng-change will change it to true and vice-versa.
You can use ng-change to handle the checkbox change event. Then you can use Array.prototype.filter to filter your events. Filtered events should be stored in a separate variable. Here is an example of how to do this:
<input ng-model="showFreeEvents" type="checkbox" ng-change="onShowFreeEventsChanged()" />
<div ng-controller="myCtrl">
<div ng-repeat="event in filteredEvents">
<span>{{event.eventName}}</span></br>
<span>{{event.eventStartDateTime}}</span></br>
<span>{{event.itemCreatedDateTime}}</span></br>
</br></br>
</div>
</div>
Then in your controller:
$scope.showFreeEvents = false;
$scope.events = [ /* here you should store unfiltered events */ ];
$scope.filteredEvents = filterEvents($scope.events);
// whenever showFreeEvents checkbox value changes, re-filter the events
$scope.onShowFreeEventsChanged = function() {
$scope.filteredEvents = filterEvents($scope.events);
};
function filterEvents(events) {
return events.filter(function(event) {
// Here you should write your filtering logic.
// I'd recommend to remove such comparisons, as these are prone to errors.
// \
return !$scope.showFreeEvents || event.eventName === 'Event 9';
});
}

How to apply ng-focus and ng-change on same input field?

Trying to call a function A when user focuses on input field using ng-focus event, and to call function B when the user starts writing and want to capture this event using ng-change event.
<input type="text" ng-focus="functionA()" ng-change="functionB()">
What is the problem with this? Seems to be working fine for me. The only thing I see a problem is that you haven't added ng-model. It is required for the ng-change to work.
var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
$scope.functionA = function() {
console.log("Input is focused");
};
$scope.functionB = function() {
console.log("changing");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="sa" ng-controller="FooController">
<input type="text" ng-focus="functionA()" ng-change="functionB()" ng-model="myValue" />
</div>

how to know if a radio button is checked or not in controller in angularjs

I am using radio buttons and I want to know if they are checked or not in the controller. Is there any other way to find that out in angular except ( document.getElementById( "radio_button" ).checked ) ?
You can trigger the function on click like this :
In HTML :
<div ng-click='newValue(value)'>
<input type="radio" ng-model="value" value="firstValue">
<input type="radio" ng-model="value" value="secondValue" > </div>
You can also observe the model change by using ng-change as follows :
In Javascript :
$scope.newValue = function (value) {
alert(value);
}
You can even watch the value by using $watch like this :
$scope.$watch('value', function(value) {
alert(value);
});
However, using ng-change is better and efficient than $watch and is easier to test.
There is no need of $watch
You can do it in more simpler way.
<body ng-controller="testCtrl">
<label>Check me to check both:
<input type="checkbox" ng-model="master" ng-checked="checkTest(master)"></label><br/>
</body>
JS :
$scope.checkTest = function(boolChecked){
console.log(boolChecked)
}
Here is Plunker
You can do this in a few different ways:
with Radio Buttons
In your HTML
<input type="radio" ng-value="isButtonChecked">
In your controller
$scope.isButtonChecked = true;
with another element tag
In your HTML
<div ng-click="isButtonChecked = !isButtonChecked"></div>
In your controller
$scope.isButtonChecked = true;

Model update is not propagated dynamically

I want to sum up 2 values and display the result in the 3rd input:
HTML
<div ng-app="myApp">
<div ng-controller="MainCtrl as mainCtrl">
Main {{mainCtrl.foo}} <br/>
<input type="text" ng-model="mainCtrl.foo"/>
<input type="text" ng-model="mainCtrl.foo2"/>
<input type="text" ng-model="mainCtrl.foo3"/>
<br/>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
var my = {};
my.MainCtrl = function() {
this.foo = '1';
this.foo2 = '2'
this.foo3 = this.sumUp();
}
my.MainCtrl.prototype.sumUp = function() {
return this.foo + this.foo2;
}
// register all controllers
myApp.controller('MainCtrl', my.MainCtrl);
My problem is that the 3rd input is set only when the document is loaded but it is not dynamically changing while typing values in first two inputs.
Fiddle:
http://jsfiddle.net/K64wb/
Use parameter ng-change for input-fields 1 and 2.
Solution for U ;) ng-change="mainCtrl.foo3=mainCtrl.sumUp()"
Example:
<div ng-controller="MainCtrl as mainCtrl">
Main {{mainCtrl.foo}} <br/>
<input type="text" ng-change="mainCtrl.foo3=mainCtrl.sumUp()" ng-model="mainCtrl.foo"/>
<input type="text" ng-change="mainCtrl.foo3=mainCtrl.sumUp()" ng-model="mainCtrl.foo2"/>
<input type="text" ng-model="mainCtrl.foo3"/>
<br/>
</div>
When your view loads, it only fires the controller function once. So it assigns foo and foo2, and then computes foo3, and then it's done. this.sumUp is never called again.
You can add ng-change="mainCtrl.foo3=mainCtrl.sumUp()" to the input boxes like Mularski suggests. This causes the sumUp function to run and be assigned to foo3 every time the input value changes. I think that looks kind of messy, though. And if you decided to add more input boxes to add up, you have to remember to put ng-change on all of them.
Another way to do it is to assign the sumUp function itself to foo3 like this
this.foo3 = this.sumUp;
instead of assigning the result of sumUp like you are doing (this.foo3 = this.sumUp();). Then in your view, assign foo3() to the ng-value of the textbox:
<input type="text" ng-value="mainCtrl.foo3()"/>
(you can't assign it to ng-model because the function isn't writeable).
Now you're telling the textbox to always show the result of that function, and it will fire whenever any of its dependencies change (i.e. foo and foo2).
Here's a Fiddle.

What changed with AngularJS 1.2.0-rc.3 that stops ng-click from having the right model value?

We have some code in an ng-click that broke with version 1.2.0-rc.3 because the value in the scope hasn't been updated from the click. Here's a dumbed down version:
HTML:
<div ng-app="" ng-controller="MyCtrl">
<input type="checkbox" ng-model="checkAll" ng-click="allChecked()"/>
<input type="checkbox" ng-model="check1"/>
<input type="checkbox" ng-model="check2"/>
<input type="checkbox" ng-model="check3"/>
<input type="checkbox" ng-model="check4"/>
<input type="checkbox" ng-model="check5"/>
<p/>
All: {{checkAll}}<br/>
1: {{check1}}<br/>
2: {{check2}}<br/>
3: {{check3}}<br/>
4: {{check4}}<br/>
5: {{check5}}<br/>
</div>
JavaScript:
function MyCtrl($scope)
{
$scope.allChecked = function() {
console.log($scope.checkAll);
if ($scope.checkAll)
{
$scope.check1 = true;
$scope.check2 = true;
$scope.check3 = true;
$scope.check4 = true;
$scope.check5 = true;
}
else
{
$scope.check1 = false;
$scope.check2 = false;
$scope.check3 = false;
$scope.check4 = false;
$scope.check5 = false;
}
}
}
Fiddle with 1.2.0-rc.2: http://jsfiddle.net/73E26/
Now with the same exact setup for 1.2.0-rc.3 (http://jsfiddle.net/LZR6j/), it now longer works as expected. $scope.checkAll is false, even though it is checked. So, the model isn't getting updated before the click listener is called like it was with 1.2.0-rc.2. What changed that is causing this? I've found that I can make this work by using ng-change instead of ng-click (http://jsfiddle.net/8VV7N/), but I want to understand what is going on so I base future decisions on it. Can anyone shed some light this?
The problem is that ng-click and ng-model have ambiguous priority and if you define them on the same element, it is unclear in what order will they be fired.
See this question for instance: Clicking a checkbox with ng-click does not update the model

Categories

Resources