I try to created dropdown with checkbox using angular demo, but its not closing if we click outside of select.
can anybody help?
Please find my fiddle:
http://jsfiddle.net/jab4raoq/120/
HTML:
Below is my html code, please note above fiddle to see the full angular code
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect dropdown-title="Select Filter" pre-selected="member.states" model="selected_items" options="states" tabindex="2"></dropdown-multiselect>
<div>
focused: {{focused}}
</div>
</div>
Related
In my controller I have input box and a div with text.
By default div is set to display:none
I want to make div visible by focusing on input box.
Is it possible to do with angular.js
Try this (No need to set you div display:none, initally showDiv is false and your div will be hidden):
<body ng-controller="myController" ng-init="showDiv=false">
<input type="text" ng-focus="showDiv=true">
<div ng-show="showDiv"></div>
</div>
Yea Angular makes it super easy without even having to write anything in controller, here's an example:
https://plnkr.co/edit/OqLpGxWwfPaBTVdTBYDy?p=preview
<body ng-controller="MainCtrl">
<input type="text" ng-hide="show" />
<button ng-click="show = !show">Show / Hide</button>
</body>
Obviously you could make yours on a hover instead of a click but you get the idea.
I use AngularJS tooltip and it works fine. Now I will have a condition wheather tooltip should be shown or not. Is there any attribute to do this?
<div data-popover-template="'chartTimePopoverTemplate.html'" data-popover-trigger="mouseenter" data-ng-repeat="scheduleIntervalContainer in ...
<script type="text/ng-template" id="chartTimePopoverTemplate.html">
<div">
{{scheduleIntervalContainer.startTime}} - {{scheduleIntervalContainer.endTime}}
</div>
</script>
you can use
popover-is-open="booleanValue"
as shown in the docs here.
http://plnkr.co/edit/vmKoBHEKq0wP3du7gtps?p=preview
I want to write directive for hide submenu on click but it is not working properly.
Hover click on menu, Submenu are display but click on submenu I cannot manage hide all submenu
I'm not sure if you really need a directive for doing this. If you don't, you could use simply 'ng-hide' and 'ng-click' directives to make this works.
In the element you want to hide, put ng-hide="hideSubmenu" and in the element who will hide it, put a ng-click="hideSubmenu = true".
In your code:
<body ng-controller="MainCtrl">
<p>Hello name {{name}}!</p>
<div>
<div class="col-md-1" style="padding-left: 00px;padding-right: 350px">
<div class="cssmenu" ng-hide="hideSubmenu">
...
<li>Type</li>
<li>Request</li>
...
</div>
</div>
</div>
</body>
I have the jquery dialog with input ng-model
<input type="text" ng-model="testing">
{{testing}} // This works
But if I declare {{testing}} outside of jquery dialog angular is not binding the data. Why this is happening. How to fix this.
Here is the fiddle currently working
Try to put all of your elements inside a controller.
<div ng-app>
<div ng-controller="Ctrl">
see
example
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>