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.
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 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`
My code looks like this :
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="Tab1">content 1</tab>
<tab heading="Tab2">content 2</tab>
<tab heading="Tab3">content 3</tab>
</tabset>
</div>
</body>
</html>
This code creates the default tabset as demonstrated by this plunker code :
http://plnkr.co/edit/?p=preview&s=gYWtjBltWXYqhczs
I want my tabset to look like as in this picture with the tab heading at the bottom.
Please guide how do I achieve this?
Found the solution myself after a lot of digging as to what the and tags render into on page load in the browser:
This strip of jquery code will do the job for you :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var timex = setInterval(function(){
if($(".tab-content").html()){
clearInterval(timex);
$('div.tab-content').insertBefore($('div.tab-content').prev('ul'));
}
},1);
});
</script>
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 am trying to build a tab set that would dynamically change on user action using bs-tabs angularstrap directive and ng-repeat (Say initially the tabs were a,b,c. On some user action it should change to x,y,z)
I am trying to do this by pointing the ng-repeat to a new array object on an user action say a click of a button.
Instead of the tab set getting refreshed, I am noticing a strange behavior
Ive recreated it in this plnkr, please have a look at it,
http://plnkr.co/edit/bpKDx56bieIshKaedzv6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>AngularStrap - Tab directive</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet">
<!-- required libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script>
<!-- optional libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
</div>
<button type="button" class="btn btn-primary" ng-click="changeTabs()">Show different set of tabs</button>
</body>
</html>
Looking at the code it seems that the tab directive observes the active tab value and refreshes only the tab content using transclusion, whereas the tab title is only assigned initially.
I think the only way to change title dinamically is creating a new directive that creates a tab directive dinamically, initializing it with the fresh values.