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>
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 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`
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>
I am looking for menu (vertical) which shows sub menu on mouse hover event. the sub menu should exactly come at the right side of selected main menu list.
I came up to main menu with ng repeat by following snippets.
<head>
<title>Links on Hover AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="LinksController.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="leftlinks.css">
</head>
<body>
<div id='content' ng-app='leftlinks' ng-controller='LinksController'>
<ul type='none'>
<li ng-repeat="link in links">{{link}}</li>
</ul>
</div>
</body>
</html>
app.controller("LinksController", function($scope){
$scope.links = ['link1','link2','link3','link4'];
});
Could someone please take me forward in using ng-mouseenter and leave events. TIA
Hope this helps
<ANY
ng-mouseenter="">
...
</ANY>
<button ng-mouseenter="count = count + 1" ng-init="count=0">
Increment (when mouse enters)
</button>
count: {{count}}
reference: https://docs.angularjs.org/api/ng/directive/ngMouseenter
I have a AnguleJS Bootstrp UI Horizontal Tab structure.
Once I click on Tab 2 the contents of Tab 2 displays and same for Tab 3.
My question is:
I want to implement in a way that after 3000 ms the Tab 2 auto display & after that Tab 3 without click on Tabs. and Once I click any particular Tab It Stops and display the content of that Tab.
Here is the Demo for Horizontal Tab view (Onclick): Plunker Demo
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}">
{{tab.content}}
</tab>
</tabset>
</div>
</body>
</html>
So there is a directive variable called active there you can pass a variable, that indicates if the tab should be active.
Put those variables into an array, set an interval and use an index to set the right tabs active.
My working plunker: PlunkerDemo
Maybe use angular's $interval.