I have this
<input type="text" ng-click"function1()">
And this:
<input type="checkbox" ng-change="function2()" ng-model="stateCheck">
The functions do this:
$scope.function1 = function(){
$scope.stateCheck = false;
}
$scope.function2 = function(){
$scope.stateCheck = !$scope.stateCheck;
}
But the function1 just works the first time. Does anyone know why? Thanks.
ng-change="function2()"
ng-model="stateCheck"
These two events are conflicting with each other, Basically ng-model makes the $state.stateCheck=true and then functin2() $state.stateCheck=!$state.stateCheck makes it false. Due to this checkbox will always remain unchecked. function1() works fine
Related
We are using AngularJS, and we require to run a function that determines whether or not the checkbox the user clicked on is actually checked. I have tried to pass $event on ngChange, but discovered it is unable to pass the $event object. The reason I want to access the $event object is so I could prevent the default behaviour until the required function has been called.
The code is as follows (does not include the code where I attempted to pass $event as it didn't work):
<label for="specificCase">
Yes
<input
type="checkbox"
name="specificCase"
data-ng-click="specificCase.no = false; specificCase.unsure = false;"
data-ng-model="specificCase.yes"
data-ng-change="$ctrl.specificCaseCheck('yes', specificCase.yes)">
</label>
<label for="notSpecificCase">
No
<input
type="checkbox"
name="notSpecificCase"
data-ng-click="specificCase.yes = false; specificCase.unsure = false;"
data-ng-model="specificCase.no"
data-ng-change="$ctrl.specificCaseCheck('no', specificCase.no)">
</label>
controller
function specificCaseCheck(value, boolean) {
//HERE I WANT TO PREVENT THE DEFAULT BEHAVIOUR OF THE CHECKBOX CHECKING
vm.optionSelected = !boolean ? false : true;
vm.caseSpecific = value == 'yes' && boolean ? true : false;
}
Question
How do I keep the checkbox unchecked until I have run a function in the controller?
Since you need to prevent default behavior but dont have the event you can follow the approach of this question Angular 2 Checkbox preventDefault
Basically you need to return false in your event handler to prevent the default behavior of "checking the checkbox when is clicked" then you can click it programatically
For that you can check this question Angular 4 checkbox set programmatically
I have a large amount of code that I inherited. It is working according to the original spec, so although it may or may not be the "right" way of doing things, it does work and I'd prefer not to mess with it. (I am VERY new to angular, and under a tight deadline - I don't have time right now to "fix" things that aren't broken, even if they're not being done the "correct" way.)
I have a checkbox and a group of address fields. When the checkbox is checked, a function runs that populates the address fields.
<input id='as_check' type="checkbox" ng-model='model.prepop_addr' ng-change="model.handlePrepopAddress()">
<input type="text" placeholder="Address 1" required ng-model='model.payment.addr1'/>
<input type="text" placeholder="Address 2" ng-model='model.payment.addr2'/>
<input type="text" placeholder="City" required ng-model='model.payment.city'/>
<input type="text" placeholder="State" required ng-model='model.payment.state'/>
<input type="text" placeholder="Zip" required ng-model='model.payment.zip'/>
In my controller, I have a function called handlePrepopAddress():
model.handlePrepopAddress = function () {
if (model.prepop_addr) {
console.log("prepop is true");
var del_addr = $window.user_state.deliveryAddress;
model.payment.addr1 = del_addr.address;
model.payment.addr2 = null;
model.payment.city = del_addr.city;
model.payment.state = del_addr.state;
model.payment.zip = del_addr.zip;
} else {
console.log("prepop is false");
model.payment.addr1 = null;
model.payment.addr2 = null;
model.payment.city = null;
model.payment.state = null;
if (!model.payment.saved) {
model.payment.zip = null;
}
}
return true;
};
When I click the checkbox, this runs correctly and updates the various fields. Requirements have changed, and the client now wants the checkbox defaulted to checked, which would then default the values of the fields. Rather than duplicating code, I thought I'd be able to just run the function at the start of the controller, like this:
place_order.controller('AsCreditCardCtrl', ['$scope', 'PaymentModel', function ($scope, model) {
$scope.model = model;
model.prepop_addr = true;
model.handlePrepopAddress();
}]);
The function is running, as the console.log statements I have in the function are running. But the view is not updating; the checkbox is visibly unchecked and the fields are empty aside from the initial placeholder values.
What am I missing? How can I make the function update the view?
You can try
var i= model.handlePrepopAddress();
It might work.
I have an input field, where I want to apply the variant of ngChange.
The input field is sort of binding with an ajax call, when user changes the input, the server side will process the data, however, I don't wanna make the call too often.
Say the user wanna input a really string, I want the call be made only after user finishes the word he is about to type.
Nevertheless, I don't wanna use event such as blur. What would be a better way to implement this, rather than setTimeout?
Use ng-model-options in Angular > 1.3
<input type="text"
ng-model="vm.searchTerm"
ng-change="vm.search(vm.searchTerm)"
ng-model-options="{debounce: 750}" />
Without ng-model-options -- In markup:
<input ng-change="inputChanged()">
In your backing controller/scope
var inputChangedPromise;
$scope.inputChanged = function(){
if(inputChangedPromise){
$timeout.cancel(inputChangedPromise);
}
inputChangedPromise = $timeout(taskToDo,1000);
}
Then your taskToDo will only run after 1000ms of no changes.
As of Angular 1.3, you could use Angular ng-model-options directive
<input ng-change="inputChanged()" ng-model-options="{debounce:1000}">
Source: https://stackoverflow.com/a/26356084/1397994
Write your own directive- this will only run the commands on myText based on the conditions you set
<input my-change-directive type="text ng-model="myText" />
.directive('myChangeDirective',function() {
return {
require : 'ngModel',
link : function($scope,$element,$attrs) {
var stringTest = function(_string) {
//test string here, return true
//if you want to process it
}
$element.bind('change',function(e) {
if(stringTest($attrs.ngModel) === true) {
//make ajax call here
//run $scope.$apply() in ajax callback if scope is changed
}
});
}
}
})
I'm wiriting a method to toggle a checklist as checked / unchecked, as follow:
$scope.checkAllToggle = function(dtProvider, destiny, ev) {
$(ev.currentTarget).parent().find('span').html());
data[destiny] = [];
if ($(ev.currentTarget).parent().find('span').html()=='Check all') {
for (var val in data[dtProvider]) data[destiny].push(data[dtProvider][val].id);
$(ev.currentTarget).parent().find('span').html('Uncheck all');
}
else $(ev.currentTarget).parent().find('span').html('Check all');
}
The label of the toggle button changes every time, but the state of the checkboxs only becomes checked after 2 click, from this point change in each 3 clicks.
What's wrong?
Append
if(!$scope.$$phase) $scope.$apply();
to the method make no difference, as prepending $scope to data
Code in plunker: http://plnkr.co/edit/Zf6UzLbC4osRov7IR5Na?p=preview
Rather than do it that way, this would be the easier way to do it.
Make the master input and assign it to a model.
<input type="checkbox" ng-model="master">
Then have your other inputs be tied to the master like this.
<input type="checkbox" ng-model="box1" ng-checked="master">
<input type="checkbox" ng-model="box2" ng-checked="master">
<input type="checkbox" ng-model="box3" ng-checked="master">
Here is your plunker with these changes.
Master Checkbox Plunker
I got your plunker to work by doing this.
$scope.checkToggle = function(dtProvider, destiny, ev) {
$scope.data[destiny] = [];
if ($(ev.currentTarget).parent().find('span').html() == 'Check all') {
for (var val in $scope.data[dtProvider]){
$scope.data[destiny].push($scope.data[dtProvider][val].id);
$(ev.currentTarget).parent().find('span').html('Uncheck all');
}
} else {
$(ev.currentTarget).parent().find('span').html('Check all');
}
$scope.$apply();
};
I could not get it to work if calling safely like if(!$scope.$$phase){$scope.$apply();} but it is working with straight $scope.$apply(). This might have something to do with rootScope and need to be safetly called in a different manner.
See this link: https://coderwall.com/p/ngisma
You also had some missing {} in your code that could have been causing some issues.
i'm using knockout 2.2.1.
I have a set of 3 check boxes to concatenate to get the corresponding values all together:
<fieldset data-role="controlgroup" id="top-colours" data-bind="topColoursLabel: { topColoursRed,topColoursBlue,topColoursGreen }">
<legend>Top Colours:</legend>
<input type="checkbox" name="top-colours-red" data-bind="checked: topColoursRed" id="tc-check-1" />
<label for="tc-check-1">Red stripes</label>
<input type="checkbox" name="top-colours-blue" data-bind="checked: topColoursBlue" id="tc-check-2" />
<label for="tc-check-2">Blue stripes</label>
<input type="checkbox" name="top-colours-green" data-bind="checked: topColoursGreen" id="tc-check-3" />
<label for="tc-check-3">Green stripes</label>
</fieldset>
The result shall be for example: "Red stripes, Blue stripes".
My viewmodel is as follows:
function ColoursViewModel() {
var self = this;
self.template = "coloursView";
self.topColoursRed = ko.observable(false);
self.topColoursBlue = ko.observable(false);
self.topColoursGreen = ko.observable(false);
self.topColoursDescription = ko.observable("");
}
How shall be the custom bindings to achieve this?
I try something like that:
ko.bindingHandlers.topColoursLabel = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.utils.unwrapObservable(valueAccessor());
// ...
var checkText = '...';
viewModel.topColoursDescription(checkText);
}
};
I'm not able to find out how to pass the array to my custom bindings to subscribe to the values of the 3 check boxes, because I'm noob to knockout.
It seems to me, that a declaration like:
data-bind="topColoursLabel: { topColoursRed,topColoursBlue,topColoursGreen }"
would be great to achieve this, but i'm searching the right way to do that.
Note: i cannot use a computed observable here, because i need to get some other properties from element - i mean the label-for text - so a custom binding is needed.
Can someone help?
UPDATED jsFiddle: http://jsfiddle.net/Sx87j/
Actually, custom binding handler is not what you really need. You should implement your self.coloursDescription as computed observable which will track checkbox changes and return currently selected stripes:
self.topColoursDescription = ko.computed(function(){
var colors = [];
if (self.topColoursRed()) colors.push('Red stripes');
if (self.topColoursBlue()) colors.push('Blue stripes');
if (self.topColoursGreen()) colors.push('Green stripes');
return colors.join(', ');
});
Also remove all tracks of your custom bindings from markup and you will get something like this: http://jsfiddle.net/h7Bmb/8/
Update
I can make your updated fiddle to work with top colours. Making it work with bottom colors too looks a bit complicated with your current approach.
Enumerate all linked color observables in your binding:
<fieldset data-role="controlgroup" id="top-colours" data-bind="topColoursLabel: [ topColoursRed, topColoursBlue, topColoursGreen ]">
Change your custom binding code (the line where ko.utils.unwrapObservable is called):
ko.utils.arrayForEach(valueAccessor(), ko.utils.unwrapObservable);
Example: http://jsfiddle.net/Sx87j/1/