I'm new to AngularJS. I'm implementing ng-keypress events in AngularJS.
I referred to many blogs and tried to do as it is shown, but my code is not working!
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
{{ text }}
</div>
</div>
script is:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.change=function($event){
$scope.text= 'a';
};
}]);
I'm trying to change the value of {{text}} on keypress.. but it's not working!
can anyone help me out!
Thanks :)
i tried the same things and its working
<body ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
<pre>{{name}}</pre>
</body>
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.change=function($event){
$scope.name= 'hello';
};
});
checkout this plunker... PLUNKER LINK
EDIT
checkout your code plunker.. thats also working
EDIT
finally the answer is: 1.0.7 does not support ng-keypress, hence it was not working..
sometimes ng-keypress do not work on some browsers !!
i had the issue with the arrow keys in chrome
try ng-keydown instead (it worked for me )
As everyone else says it's working as it is supposed to do. Perhaps you want something like this?
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = '';
$scope.change=function($event){
$scope.text += String.fromCharCode($event.keyCode);
};
}]);
Related
I am using Angular 1.x for my stack and when I make an API call and store the response in the $rootScope, it is not accessible in other controllers' view.
My controller:
angularApp.controller('mainController', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){
var checkIfAuthenticated = function(){
return $http.get('/api/isAuthenticated');
};
checkIfAuthenticated()
.then(function(res) {
if(res.status===200){
console.log("Success");
$rootScope.userLoggedIn = true;
}
})
}]);
Now, in another controller's view I use it like this:
<div ng-if="userLoggedIn" class="py-1 pl-1 pr-1">
<span><b>Message Board</b></span>
<div class="form-control" readonly id="lockTextbox">Show something</div>
</div>
The problem is, the API call /api/isAuthenticated does provide the right response (status 200) but the ng-view gets it wrong.
I am sure this is to do with $rootScope.userLoggedIn being a response from an async call (as I get Success in my console) but how do I solve it?
Thanks in advance!
EDIT
After I posted the question, I noticed that in the mainController's view, the ng-if logic doesn't work either. What is very strange is that when I open up the browser's debug console, it starts working! I think this is just an async issue but I don't know how to solve it. How do I tell the view that the variable is on it's way?
OK, to solve the timing issue, I'll rework the answer completely. This should be a - quick and dirty but - working example:
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl as $ctrl">
<h1>Hello {{$ctrl.name}}</h1>
<p>Start editing and see your changes reflected here!</p>
<div ng-if="$ctrl.name === 'Angular.js'"><b>Message Board</b</div>
</div>
</body>
</html>
script.js
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope, $http) {
const self = this;
self.name = 'Plunker';
console.log('hello');
function checkIfAuthenticated(){
console.log('get');
return $http.get('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js');
};
checkIfAuthenticated().then(function(res) {
if(res.status===200){
console.log('Success');
self.name = 'Angular.js'; // insert any logic here
} else {
console.log('Failed');
}
})
});
Console
hello
get
Success
Does it work for you?
Working Example
The below demo shows the $rootScope variable available in both controllers after being set from a promise delayed by two seconds.
angular.module("app",[])
.controller('mainController', function($scope, $rootScope, $timeout) {
var checkIfAuthenticated = function(){
return $timeout(function() {
return { status: 200 };
}, 2000);
};
checkIfAuthenticated()
.then(function(res) {
if(res.status===200){
console.log("Success");
$rootScope.userLoggedIn = true;
}
})
})
.controller('otherController', function($scope) {
console.log("other controller");
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<fieldset ng-controller="mainController">
MAIN Controller userLoggedIn={{userLoggedIn}}<br>
<div ng-if="userLoggedIn">
Message Board - Show something
</div>
</fieldset>
<fieldset ng-controller="otherController">
OTHER Controller userLoggedIn={{userLoggedIn}}
<div ng-if="userLoggedIn">
Message Board - Show something
</div>
</fieldset>
</body>
I found the problem. I updated my Angular from 1.6.4 to 1.7.9 (and all modules like angular-sanitize etc) and that did the trick. Should have been the first thing I did but I missed it entirely
Add the following code in html box and it will work as it should be
<div ng-app="myapp" data-ng-controller='Ctrl'>
<h1> Header </h1>
<h3> {{test}} </h3>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.test = "Hello";
});
</script>
Now move the JavaScript to JavaScript box
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.test = "Hello";
});
It start giving error: Uncaught Error: No module: myapp
I don't want to write everything in html section, any fix?
While I was playing with setting, found the answer :)
Change the setting Load Type from "OnLoad" to "No wrap - in ", see the attached image.
Strange but it is working like charm :)
I have a curious error on my angular app.
I have a controller where I declare some variables. If I am going to write them in the html it works as expected. But if I try to change them, eg in a input-box nothing happens.
Even when I try to call a function from a button or something nothing happens.
The code below is a simplified version of my controller.
angular.module('myModule', [])
.controller('myCtrl', ['$rootScope', '$scope', 'SomeServices',
function ($rootScope, $scope, someServices) {
'use strict';
$scope.myVar = "foobar";
$scope.myFunction = function() {
// it never gets here
}
$scope.$watch("myVar", function() {
// it even never gets here
});
}]);
My HTML
<!-- change this and the watcher will not doing anything -->
<!-- the value will bee foobar, but after that nothing happens -->
<input type="text" ng-model="myVar" />
<button ng-click="myFunction()">click here and nothing will happen</button>
If I tried it in codepen it works normaly.
Has anyone even got such a behaviour?
I don't see any problem why it should not work, may be this is more simplified demonstration,
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.myVar = "foobar";
$scope.myFunction = function() {
console.log($scope.myVar + ' myFunction called')
}
$scope.$watch("myVar", function() {
console.log($scope.myVar + ' value changed')
});
});
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<div ng-app="myApp" ng-controller="MainCtrl">
<input type="text" ng-model="myVar" />
<button ng-click="myFunction()">click here and nothing will happen</button>
</div>
Open developer tool to see logs.
Elaborate more if you are facing some other problem.
The problem, I have is AngularJS application is not updating the result when input changes in the input HTML field. If I turn this to auto bootstrapping it does work as expected. I do not know what am i doing wrong?
This is JS file.
angular.module('doublevalue', [])
.controller('DoubleController', ['$scope', function($scope){
$scope.value = 0;
$scope.double = function(value) { $scope.value = value * 2; }
}]);
angular.element(document).ready(function() {
var div3 = document.getElementById('App3');
angular.bootstrap(div3, ['doublevalue']);
});
JSFIDDLE version:
https://jsfiddle.net/as0nyre3/48/
HTML file:
<div id ='App3' ng-controller='DoubleController'>
Two controller equals
<input ng-model='num' ng-change='double(num)'>
<span> {{ value }}</span> </div>
Auto bootstrapping one link:
https://jsfiddle.net/as0nyre3/40/
Please help me!
This is working, with a problem like that you should always check your selectors
<div id="App3" ng-controller="myCtrl">
<input type='text' ng-model='name' ng-change='change()'>
<br/> <span>changed {{counter}} times </span>
</div>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('App3'), ['myApp']);
})
</script>
Here when i click on cartDetails the dynamic scope variable x.SmId value need to be passed to the bellow function and in alert box need to display the parameter .How can we do this one in angular js?
<div ng-app="" ng-controller="MyCtrl">
<div ng-repeat="x in names">
<div ng-click="cartDetails('{{x.SmId}}')">
<div>{{x.name}}</div>
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
$scope.search = function(param) {
$http.get('AngularJs-Response.jsp?mid='+param).success(function(response) {
$scope.names = response;
});
};
$scope.cartDetails = function(smid) {
alert(smid);
};
}]);
</script>
Use simple:-
ng-click="cartDetails(x.SmId)"
I tried to use:
ng-click="cartDetails(x.SmId)"
but it simply x.SmId as string, its not replaced by value. After reading few more articles, I found a solution like below:
<div ng-click="cartDetails('{{x.SmId}}')">
Its a working solution in AngularJS v1.3.9