I'm trying to uncheck a checkbox bound using ng-model to a scope variable. Basically the below doesn't uncheck after 2 seconds.
html
<div ng-controller="AppCtrl">
<input type="checkbox" ng-model="checked">
</div>
js
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.checked = true;
setTimeout(function(){
$scope.checked = false;
alert('should be unchecked!');
},2000);
}
https://jsfiddle.net/thomporter/tcVhN/
Try to use angular $timeout service instead of javascript's setTimeout
Becuase if you use setTimeout in angularjs you need use $scope.$apply() to ensure the changes in scope. check this fiddle
But $timeout will do this work for you.
Like this
$timeout(function(){
$scope.checked = false;
alert('should be unchecked!');
},2000);
JSFIDDLE
This work fine for me!
HTML FILE
<input type="checkbox" [(ngModel)]="checked" [checked]="checked" (change)="onChange(checked? 'block':'none')">
.TS FILE
export class TopBarComponent implements OnInit {
checked: boolean;
constructor(public dados: DadosService) { }
ngOnInit() {
if(this.dados.meusChamados == 'block')
this.checked = true;
else
this.checked = false;
}
onChange(event : any){
this.dados.meusChamados = event;
}
}
checked = variable created on .ts file
onChange = a function created on .ts file to change the status of a div to display: none|block
You need to set your checked variable to the selected attribute.
<div ng-controller="AppCtrl">
<input type="checkbox" selected="{{checked}}">
</div>
Related
I am trying to pass data to an API for the user e-mail subscription status as "Y"/"N".
In the controller code console.log(a.checked) is undefined. But in regular javascript a onclick event for the input element type="checkbox" has the this.checked to respond correspondingly as true or false. Why is it not happening here in AngularJS?
My html code with angular directive ng-click:
<label for="mail_sub">E-mail subscription</label>
<input id="mail_sub" type="checkbox" name=checkbox ng-click="mailsubscription(this)">
Code of the controller:
.controller("registerCtrl", function($scope, $state, userProcess) {
$scope.mailsubscription = function(a) {
console.log(a);
console.log(a.checked); // console output is: "undefined"
signupinfo = {};
if (a.checked) {
signupinfo.u_mail_subscription = 'Y';
} else {
signupinfo.u_mail_subscription = 'N';
}
console.log(signupinfo);
};
/*$scope.registerProcess = function(signupinfo){
console.log(signupinfo);
userProcess.signup(signupinfo).sucess(function(response){
if(response.status){
}
})
};*/
});
There is no checked defined in your scope. You have do to something like this:
$scope.checked = false
$scope.mailsubscription = function () {
$scope.checked = !$scope.checked;
console.log($scope.checked)
};
Or you can use ngModel directive in your template
<input id="mail_sub" type="checkbox" name=checkbox ng-click="mailsubscription(this)" ngModel="checked">
If you go this way you dont need to toggle the variable checked by your self.
I have a simple form like so:
<form name="add-form" data-ng-submit="addToDo()">
<label for="todo-name">Add a new item:</label>
<input type="text" data-ng-model="toDoName" id="todo-name" name="todo-name" required>
<button type="submit">Add</button>
</form>
with my controller as follows:
$scope.addToDo = function() {
if ($scope.toDoName !== "") {
$scope.toDos.push(createToDo($scope.toDoName));
}
}
what I'd like to do is clear the text input after submission so I simply clear the model value:
$scope.addToDo = function() {
if ($scope.toDoName !== "") {
$scope.toDos.push(createToDo($scope.toDoName));
$scope.toDoName = "";
}
}
Except now, because the form input is 'required' I get a red border around the form input. This is the correct behaviour, but not what I want in this scenario... so instead I'd like to clear the input and then blur the input element. Which leads me to:
$scope.addToDo = function() {
if ($scope.toDoName !== "") {
$scope.toDos.push(createToDo($scope.toDoName));
$scope.toDoName = "";
$window.document.getElementById('todo-name').blur();
}
}
Now, I know that modifying the DOM from the controller like this is frowned upon in the Angular documentation - but is there a more Angular way of doing this?
When you give a name to your form it automatically gets added to the $scope.
So if you change your form name to "addForm" ('cause I don't think add-from is a valid name for angular, not sure why), you'll have a reference to $scope.addForm.
If you use angular 1.1.1 or above, you'll have a $setPristine() method on the $scope.addForm. which should recursively take care of resetting your form. or if you don't want to use the 1.1.x versions, you can look at the source and emulate it.
For those not switching over to 1.1.1 yet, here is a directive that will blur when a $scope property changes:
app.directive('blur', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.blur, function () {
element[0].blur();
});
};
});
The controller must now change a property whenever a submit occurs. But at least we're not doing DOM manipulation in a controller, and we don't have to look up the element by ID:
function MainCtrl($scope) {
$scope.toDos = [];
$scope.submitToggle = true;
$scope.addToDo = function () {
if ($scope.toDoName !== "") {
$scope.toDos.push($scope.toDoName);
$scope.toDoName = "";
$scope.submitToggle = !$scope.submitToggle;
}
};
}
HTML:
<input type="text" data-ng-model="toDoName" name="todo-name" required
blur="submitToggle">
Plnkr
I have made it work it as below code.
HTML SECTION
<td ng-show="a">
<input type="text" ng-model="e.FirstName" />
</td>
Controller SECTION
e.FirstName= '';
I want to update a text value when the value is changed by using some method, the method should not call when I am still typing text but when exit from the textbox or change it through script code:
<input type="text" ng-model ="model.value" ng-change = "update()"/>
what should contain update() method,
what I tried is : wrote a directive for this textbox, and
scope.$watch('model', function(nval,oval){
if ((oVal === undefined) && (nVal != undefined)){
update()
}
});
It is calling for the first time, but not whenever the model value changed.
I want to call update method whenever the model.value changed, but not while entering text
You can use ng-blur and you should change your $watch:
JSFiddle
HTML:
<div ng-app="myApp" ng-controller="dummy">
<input type="text" ng-model="model.value" ng-blur="update()"/>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.model = {
value: 'hello'
};
$scope.update = function () {
console.log("changed!");
};
$scope.$watch('model.value', function (nval, oval) {
if (oval !== nval) {
$scope.update();
}
});
}]);
You can use data-ng-model-options directly to achieve your requirement.
Like,
here you can get full reference of data-ng-nmodel-options
https://docs.angularjs.org/api/ng/directive/ngModelOptions
this directive will work for the versions angular 1.4.x ( from 1.4.x version it suppports)
I am using a checkbox with a function inside the data-bind, but I am unable to check the checkbox.
view:
<input type="checkbox" data-bind="click: function(){ f('hello parameter'); }">Click me
View Model:
var VM = function () {
this.f = function (param) {
alert(param); // here i am getting 'hello parameter'
return true;
}
}
ko.applyBindings(new VM());
Here is my Fiddle
By default, the click binding prevents the default reaction to a click based on the assumption that your JavaScript click event handler will handle everything. You need to return "true" to get the default behavior anyway, which you are doing from your f() function but not the wrapper inside data-bind:
<input type="checkbox" data-bind="click: function() { f('hello parameter'); }">
should be
<input type="checkbox" data-bind="click: function() { return f('hello parameter'); }">
Without context around the code it's not clear how you intend to use this control. With a checkbox you would normally use the checked binding that is bound to a boolean observable:
The checked binding links a checkable form control — i.e., a checkbox () or a radio button () — with a property on your view model.
So another way of writing this using the checked binding would be:
Sample Code:
var VM = function () {
var self = this;
self.myCheck = ko.observable(false);
self.myCheck.subscribe(function () {
alert('checked value = ' + self.myCheck());
});
}
ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<input type="checkbox" data-bind="checked: myCheck" />
Click me
</div>
With this example, there's an observable that tracks the value of the checkbox: self.myCheck. So when the checkbox is checked/unchecked, self.myCheck() will be set to true/false.
In order to provide some output or run some code when the value is changed, I've subscribed to the observable, which basically means that every time the value of the observable is changed, the alert will be fired (or whatever code you place in there).
Demo On JS Fiddle
I have a simple form like so:
<form name="add-form" data-ng-submit="addToDo()">
<label for="todo-name">Add a new item:</label>
<input type="text" data-ng-model="toDoName" id="todo-name" name="todo-name" required>
<button type="submit">Add</button>
</form>
with my controller as follows:
$scope.addToDo = function() {
if ($scope.toDoName !== "") {
$scope.toDos.push(createToDo($scope.toDoName));
}
}
what I'd like to do is clear the text input after submission so I simply clear the model value:
$scope.addToDo = function() {
if ($scope.toDoName !== "") {
$scope.toDos.push(createToDo($scope.toDoName));
$scope.toDoName = "";
}
}
Except now, because the form input is 'required' I get a red border around the form input. This is the correct behaviour, but not what I want in this scenario... so instead I'd like to clear the input and then blur the input element. Which leads me to:
$scope.addToDo = function() {
if ($scope.toDoName !== "") {
$scope.toDos.push(createToDo($scope.toDoName));
$scope.toDoName = "";
$window.document.getElementById('todo-name').blur();
}
}
Now, I know that modifying the DOM from the controller like this is frowned upon in the Angular documentation - but is there a more Angular way of doing this?
When you give a name to your form it automatically gets added to the $scope.
So if you change your form name to "addForm" ('cause I don't think add-from is a valid name for angular, not sure why), you'll have a reference to $scope.addForm.
If you use angular 1.1.1 or above, you'll have a $setPristine() method on the $scope.addForm. which should recursively take care of resetting your form. or if you don't want to use the 1.1.x versions, you can look at the source and emulate it.
For those not switching over to 1.1.1 yet, here is a directive that will blur when a $scope property changes:
app.directive('blur', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.blur, function () {
element[0].blur();
});
};
});
The controller must now change a property whenever a submit occurs. But at least we're not doing DOM manipulation in a controller, and we don't have to look up the element by ID:
function MainCtrl($scope) {
$scope.toDos = [];
$scope.submitToggle = true;
$scope.addToDo = function () {
if ($scope.toDoName !== "") {
$scope.toDos.push($scope.toDoName);
$scope.toDoName = "";
$scope.submitToggle = !$scope.submitToggle;
}
};
}
HTML:
<input type="text" data-ng-model="toDoName" name="todo-name" required
blur="submitToggle">
Plnkr
I have made it work it as below code.
HTML SECTION
<td ng-show="a">
<input type="text" ng-model="e.FirstName" />
</td>
Controller SECTION
e.FirstName= '';