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`
Related
all. have strange situation with IE, when element with mouse events within button - events will not trigger. this situation is not reproduce in Chrome or Firefox. unfortunately there is no info about this situation, perhaps someone was has same situation?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<button>BUTTON
<div ng-mouseover="count = count + 1" ng-init="count=0">Mouse over me!</div>
</button>
<h1>{{count}}</h1>
<p>This example will increase the value of the variable "count" every time the mouse cursor moves over the DIV element.</p>
</body>
</html>
For whatever reason IE11 isn't seeing you as mousing over the child <div>, but instead it sees you mousing over the parent <button>.
This can be fixed by moving the ng-mouseover attribute to the <button> element.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<button ng-mouseover="count = count + 1" ng-init="count=0">
BUTTON
<div>Mouse over me!</div>
</button>
<h1>{{count}}</h1>
</body>
</html>
I'm new to AngularJS.
I started to write a basic code, but the result doesn't give me as expected. The result give me as 10+20={{ 10+20 }}. But instead I need to see 10+20=30
Here is what I tried.
<!DOCTYPE html>
<html>
<head>
<script src="lib/angular.min(2).js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
I'm using eclipse. The angular.min(2).js file is in lib folder under WebContent. The HTML page is under WebContent folder.
Check your angular.js script file is loading properly by looking at the network tab. The following works fine.
DEMO
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
Remove WebContent from the URL. If your html file is in WebContent directory, your URL should be
<script src="lib/angular.min(2).js"></script>
have you tried to use the script in js like this:
<body ng-app="main">
10+20={{10+20}}
</body>
<script>
var app=angular.module("main",[])
</script>
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 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 :)
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>