Fiddle - http://plnkr.co/edit/NizmbUMHblixAUPfQF2G?p=preview
I'm learning AngularJS, and I wanted to try something simple....
Every time I type in a textbox I want to see it's keyCode, (I'm using jQuery in the following function I'm trying to rewrite in this example as jQuery standardizes the keycode event in this case for cross browser consistency)
// Get Keycode/Which
$("[data-action=outputkeycode]").on("keyup", function(e) {
$(this).val(e.which);
}).on("click", function() {
$(this).select();
});
Because I'm trying to update the textbox being typed to find the keyCode I figured I'd apply event.keyCode in the value, but it's not working.
<body ng-app="">
<input ng-keyup="event=$event" value="{{ event.keyCode }}">
</body>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="">
<input ng-keyup="event=$event" value="{{ event.keyCode }}">
</body>
</html>
If you need to show the key code in the input then you can use below code
<input ng-keydown="event=$event.keyCode; $event.preventDefault()" ng-model="event">
when key is pressing down which happens before the ng-keyup we will assign the keycode to event scope variable, then we prevent its default action which is type the actual character in textbox.
and assign the ng-model="event" here the text box gets the value of event scope variable
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="">
<input ng-keydown="event=$event.keyCode; $event.preventDefault()" ng-model="event">
</body>
</html>
Update
select the text on click in textbox.
You can create a angular directive to select the textbox text, here is a good directive
and here is the updated demo
Try this snippet:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="">
<input ng-keyup="keyCode=$event.keyCode" ng-model="keyCode">
</body>
</html>
Related
I am new in angularjs , i need to show a div having delete,rename and move buttons when is click an image(contained a ckeckbox) in a gallery.there are large number of image are present, i need to show the div atleast one checkbox is checked using angularjs.
try below code which should help you to solve your purpose:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app>
<input type="checkbox" ng-click="isChecked = !isChecked;">Show Div</input>
<br>
<div style="width:200px;height:200px;" ng-show="isChecked">
Hello Div!!!
</div>
</body>
</html>
I'm a newbie to this thing called 'AngularJS' so I got stuck at one point.
Consider the below code sample :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-bind="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
In above example why can't I bind the value of application variable "firstName" to the HTML input text control usng "ng-bind"?
and suppose I write the code as below :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
In above example I can bind the value of application variable "firstName" to the HTML input conrol using "ng-model".
Can someone please clarify me the difference between the above two codes in easy to understand language?
Also, look at below code snippet :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
In the above(third) example how could I be able to bind the value of application variable "firstName" to the <p> tag?
Someone please explain me.
Thanks.
ng-bind makes a one way binding between your controller and the view. In this case, the view will only reflect changes made in the controller, but not viceversa. This is the same as using the double brackets notation {{variable}}
In the other hand, ng-model makes a double binding, that is, changes made in the view (normally in an input form), will be accesible automatically in the controller, and changes made in the controller will be updated in the view
check this answer: https://stackoverflow.com/a/12420157/5186787
In regard to the snippet, you could just do:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller='myController'>
<p>{{firstName}}</p>
</div>
</body>
</html>
Which implements a one way bind. So, if you have your application defined in this way:
var app=angular.module('myApp',[]);
app.controller('myController', ['$scope',function($scope){
$scope.firstName = 'John Doe';
}]);
It would make a one-way binding between your variable firstName in the controller and the view.
It is better to use controllers for this type of work.
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.
I am using Angular.js to change background of body on click of a button. All seems fine but still program not running.
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body data-ng-app="" data-ng-style="alpha">
<button data-ng-click="alpha={background:'red'}">Click Me</button>
</body>
</html>
Reference:
https://docs.angularjs.org/api/ng/directive/ngStyle
I think you have to try by removing "data-" from your attributes name as per jsfiddle
`http://jsfiddle.net/56512rmc/2`
I have text like below which comes from JSON
<div><div>All are lucky and contect is like
I want this to be displayed properly when rendered. How do i do this.
<p>{{bodydata}}</p>
you can use $sce (Strict Contextual Escaping) for displaying HTML encoded characters
function myCtrl($scope,$sce){
$scope.html = $sce.trustAsHtml('<div><div>All are lucky and contect is like');
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<span ng-bind-html="html"></span>
</div>
</body>
</html>
Hope it works for you :)