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
Related
I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition.
Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js).
As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides?
for posterity, the equivalent html file from the fiddle would be:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
</head>
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</body>
</html>
and the equivalent .js would be:
var my_app = angular.module('my_app', ['ui.bootstrap']);
my_app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
Thanks!
Angulajs UI Bootstrap 0.13.0 need ngAnimate module for animation. Register ngAnimate it will work. issue
Original plnkr
Modified, animation working plnkr
Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the animation not work.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>
</head>
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</body>
</html>
The JS can stay the same. I just modified the ui-bootstrap version in the html code.
Here is the updated fiddle as well - https://jsfiddle.net/xv7tws10/5/
Edit: See Premchandra's response below. Apparently you have to include ng-animate in order to get collapse animation to work in angular 1.3.
There seems to be a version limit up until where this stops to animate.
Here is a Fiddle to see it working as you want it to, but with the newest versions it will only work with.
<html !DOCTYPE html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="my_app">
<br>
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed" >
<div class="well well-lg">Some content</div>
</div>
</div>
<script src="http://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.8.0/ui-bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.min.js"></script>
<script>
angular.module('my_app', ['ngAnimate', 'ui.bootstrap']);
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
</script>
</body>
</html>
I am using the multi select directive for angular. After I have selected some values from the button, the button label gets updated to reflect the change. I want to refresh/reinitialize the directive on a button click without refreshing the page so that button goes back to the original state. Please find the link for plunker below.
Punker: http://plnkr.co/edit/52kgSkn0V3qwH4NkAAad?p=preview
<html>
<head>
<script data-require="angular.js#1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="isteven-multi-select.css" />
<script src="isteven-multi-select.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="main" >
<div>
<div isteven-multi-select
max-labels="2"
input-model="plugins"
output-model="chosenPlugins"
button-label="name"
item-label="name"
tick-property="selected">
</div>
<div>
Plugins: {{ chosenPlugins }}
</div>
<div>
<button ng-click="resetDirective()">Reset</button>
</div>
</div>
</body>
</html>
I am trying to implement angular-strap modal, I have an external template of modal but it shows as blank. Whats wrong ?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
<script data-require="angularstrap#*" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script data-require="angularstrap#*" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" content-template="customer.tpl.html" bs-modal="modal">New Customer</button>
</body>
</html>
Here's link to Plunker
Couple of things you need to fix:
The first is to replace content-template with data-template, and the second is that if you have ng-bind="title", you need to have a title variable on the scope, because ng-bind replaces the content of the HTML element it's on with what it's binded to:
<body>
<button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer</button>
</body>
To see the text in the modal, either remove ng-bind="content" from the body, or assign content variable some value.
Working Plunker.
Source: http://mgcrea.github.io/angular-strap/##modals-examples
I'm using Angular Snap module but I can't make it only use a section of my page. For example I want yo leave header and footer intact when "snaping".
The follow example code describe my issue http://plnkr.co/edit/qOilojtXpCcBm99ynuzQ?p=preview
Code
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="angular-snap.css" type="text/css" />
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js" data-semver="1.2.4"></script>
<script src="angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- Header Image should here -->
<header>
<h1>Header</h1>
</header>
<!-- Menu Bar goes here -->
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li class="active"><a class="test" href="#">This is the one</a>
<ul class="submenu">
<li>Submenu item 1
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
<!-- Both Snap-drawer and Snap-content should go below the Menu bar -->
<snap-drawer>
<button snap-toggle>Another Toggle Button</button>
</snap-drawer>
<snap-content snap-options="{tapToClose:false}">
<button snap-toggle>Toggle</button>
</snap-content>
</body>
</html>
Thanks
Plugin creator gives me answer for this on https://github.com/jtrussell/angular-snap.js/issues/75
I copy answer here for Archive purpose:
It's doable, here's an example with a fixed footer from a previous
thread, Snap still applies to the whole page we're just showing
content over it:
http://plnkr.co/edit/Vdz0AZ3tnlfErERmjcrY?p=preview
You can change it to a fixed header by updating the nav element like
so:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background:red">
<div class="container">
Bottom container stuff!
</div>
</nav>
Just fair warning there are some issues with using fixed position
elements, just something to keep in mind.
The snap-content directive should expand to fill it's container, so
you may also be able to get something working by wrapping that element
in a non-static positioned element. Here's a rough demo.
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.