I would like to open dropdown only if condition is fulfilled. How can I do this? Now my code looks like:
<div class="btn-group" uib-dropdown>
<button class="btn btn-secondary" uib-dropdown-toggle ng-click="vm.openDropdown()">
open
</button>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<a class="dropdown-item d-inline-flex" ng-repeat="test in vm.tests">{{test}}</a>
</div>
</div>
vm.openDropdown = openDropdown
vm.tests = [1, 2, 3, 4]
function openDropdown () {
if (vm.test == true) {
////and here I need have condition if something is true, I do not want to open dropdown
}
}
Have you tried to use ng-disabled : (if variable test is true you can't open dropdown)
<div class="btn-group" uib-dropdown>
<button class="btn btn-secondary" uib-dropdown-toggle ng-disabled="vm.test">open
</button>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<a class="dropdown-item d-inline-flex" ng-repeat="test in vm.tests">{{test}}</a>
</div>
</div>
Related
My scope looks something like this
$scope.audit = [{
"specification": "Test1",
"username":"user1",
"lastname":"lastname1"
},
{
"specification": "Test1",
"username":"user2",
"lastname":"lastname2"
},
{
"specification": "Test2",
"username":"user1",
"lastname":"lastname1"
},
{
"specification": "Test2",
"username":"user2"
"lastname":"lastname2"
}]
I groupBy specification and have two buttons as filters, username and lastname, which can be clicked to filter the data. The specification and the filters are part of accordion heading.
Now when I click on specification heading, the panel opens up well. But how do I open an accordion using filter buttons? And if the panel is open, how can I keep it open and not toggle the data?
HTML
<div class="modal-body" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
<accordion close-others=false>
<accordion-group is-open="open" data-ng-repeat="(spec,value) in audit | orderBy: 'specification' | groupBy: 'specification'">
<accordion-heading>
<i class="glyphicon" ng-class="{'glyphicon-chevron-down': open, 'glyphicon-chevron-right': !open}"></i>
<b>{{spec}}</b>
<div class="btn-toolbar pull-right" ng-click="$event.stopPropagation();$event.preventDefault();" >
<div class="btn-group pull-right" >
<button data-style="slide-right" ng-click="Activate(this,'username')" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Username
</button>
</div>
<div class="btn-group pull-right" >
<button data-style="slide-right" ng-click="Activate(this,'lastname')" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Lastname
</button>
</div>
</div>
<accordion-heading>
<div data-ng-repeat="val in value">
{{val.username}} -- {{val.lastname}}
</div>
<accordion-group>
<accordion>
</div>
With my current approach on clicking the Activate(), I set the value of open to true, but this opens up all the accordions.
Javascript:
$scope.Activate = function(val,filter) {
if (!$scope.open) {
$scope.open = true;
}
}
are you looking for something like this?
HTML Code
<div class="modal-body" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
<accordion close-others=false>
<accordion-group is-open="open" data-ng-repeat="(spec,value) in audit | groupBy:'specification'">
<accordion-heading class="col-lg-12">
<i class="glyphicon" ng-class="{'glyphicon-chevron-down': open[$index], 'glyphicon-chevron-right': !open[$index]}"></i>
<b ng-click="Activate($index)">{{spec}}</b>
<div class="btn-toolbar pull-right" ng-click="$event.stopPropagation();$event.preventDefault();">
<div class="btn-group pull-right">
<button data-style="slide-right" ng-click="Activate($index)" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Username
</button>
</div>
<div class="btn-group pull-right">
<button data-style="slide-right" ng-click="Activate($index)" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Lastname
</button>
</div>
</div>
</accordion-heading>
<div ng-show="open[$index]" ng-hide="!open[$index]">
<span class="col-lg-12" data-ng-repeat="val in value">{{val.username}} -- {{val.lastname}}</span>
</div>
</accordion-group>
</accordion>
</div>
JavaScript
$scope.open = [];
$scope.Activate = function (ind) {
if (!$scope.open[ind]) {
$scope.open[ind] = true;
}
else
{
$scope.open[ind] = false;
}
}
I have a Json which m getting in $scope.notifications.
**Json**
0:{
$$hashKey: "object:31"
action: "wrote a comment"
creationDate: "2015-11-23 13:48:55.0"
post: Object
seen: true
user: Object
}
This Json has a key : seen which can be either true or false . I have to filter out those objects in ng-repeat whose key :seen is= false on clicking button unread notifications.
and then again clear the filter on clicking All Notifications button.
HTML
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="notifications-action-menu text-center">
<li>
<button type="button" class="btn btn-link btnUnreadFilter active" data-filter="all" id="btnShowAll">All Notifications</button>
</li>
<li>
<button type="button" class="btn btn-link btnUnreadFilter" data-filter="unread" id="btnShowOnlyUnread" ng-click="actions.unreadNotifications()">Unread Notifications</button>
</li>
<ul></ul>
</ul>
</div>
<div class="col-xs-12">
<div id="notificationsListWrapper" ng-repeat="notification in notifications" ng-hide="{{notification.seen == seen}}">
<div class="notification-item" ng-class="{'read' : notification.seen == true}">
<div class=" no-click-bind mark-as-read-btn">
<button type="button" class="no-click-bind" data-toggle="tooltip" data-placement="top" data-original-title="Mark as read" ng-click="actions.redirectToPost(notification.post.uuid, $index)">
<i class="fa fa-check"></i>
</button>
</div>
<div class="notification-body">
<div class="notification-details">
<a href="" class="doc-profile-img"><img class="" alt="{{notification.user.authorName}}" ng-src="{{(notification.user.thumbnailUrl) ? notification.user.thumbnailUrl :'/assets/images/avatars/avatar_100x100.png'}}">
</a>
<a>{{notification.user.authorName}}</a><span class="notification-action"> {{notification.action}}</span>
<a href="/news/abcd" class="notification-url no-click-bind">{{notification.post.title}}
</a>
<div class="notification-meta"><i class="fa notification-type-icon fa-calendar"></i> <small class="notification-datetime text-muted" title="Thursday, January 21, 2016 at 5:26 pm">Jan 21 2016</small>
</div>
<div class="notification-actions"></div>
</div>
</div>
<div ng-if="notification.post.featuredAttachmentUrl != '' " class="notification-url-img"><img alt="" ng-src="{{notification.post.featuredAttachmentUrl}}"></div>
</div>
</div>
Try something like:
ng-repeat="notification in notifications | filter:seenFilter"
where seenFilter is set to {seen:true}, {seen:false} or true by the controller. Example:
$scope.actions.unreadNotifications = function(){
$scope.seenFilter = {seen:false}
}
My Angular code
<div ui-tree="rootTree" data-drag-enabled="false">
<ol ui-tree-nodes="" ng-model="course.sections" ng-class="{hidden: collapsed}">
<li ng-repeat="section in course.sections" ui-tree-node> <div ui-tree-handle class="tree-node tree-node-content" ng-click="editSection(section)" >
<a class="btn btn-success btn-xs"ng-if="section.sectionInstances && section.sectionInstances.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon glyphicon-chevron-down" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed }">
</span>
</a>
{{section.sec_name}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeSection(section)">
<span class="glyphicon glyphicon-remove">
</span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addSectionInstance(section)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus">
</span>
</a>
</div>
</li>
</ol>
</div>
If i use data-drag-enabled="false", then ng-click function is calling. I want both the function drag and drop as well as ng-clik function.
If you are just wanting to perform functionality on 'dragStart', then it appears according to the angular-ui-tree documentation, that you can define treeOptions in your controller and assign them to your tree directive attribute value.
myAppModule.controller('MyController', function($scope) {
$scope.treeOptions = {
dragStart: function(sourceNodeScope, destNodesScope, destIndex) {
// Do things here
},
dragEnd: function(sourceNodeScope, destNodesScope, destIndex) {
}
};
});
<div ui-tree="treeOptions">
<ol ui-tree-nodes ng-model="nodes">
<li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
</ol>
</div>
same trouble here, few years after.
Sean answer doesn't seem to answer the question.
issue:
* with drag n drop enable: I can't use ng-click to remove/edit a node, but I can drag n drop it.
* w/o drag n drop enable: my ng-click works.
Solution:
move the "ui-tree-handle" from the global div to specific location w/o any ng-click in.
I want to bring drop downs into my project and I took the code from the example. The drop down appears as in the example but when I click it nothing happens.
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div>
</form>
Now the controller for this html:
angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});
I had the same problem and I solved by deleting the line dropdown-toggle
I don't know what the problem is but it works well in this way
Here what I did:
This si the original example:
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
and this is the code without dropdown-toggle
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Edit:
The above example works if you are using angular-ui-bootstrap Version: 0.10.0
Now I've changed the ui-bootstrap using this
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
And now all work like a charm
There are a few problems in your code:
Your HTML is not valid, the last <div> tag shouldn't be there
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</div>
</form>
You did not reference ui.bootstrap as a module dependency
angular.module('startupApp', [
'ui.bootstrap'
])
Did you include the right files ?
AngularJS
Angular UI Bootstrap
Bootstrap CSS
You don't need anything special in your controller, the dropdown and dropdown-toggle directives are self-sufficient.
JsFiddle Demo
After much struggle I just found the answer that worked for my case. I only needed to add parse-angular to my angular.module('myapp'['parse-angular']).
First I want to say thank you to Jorge Casariego for his answer. His answer helped me to get much further.
There was one problem at the end though, that neither $scope.toggled = function(open) {...} nor $scope.toggleDropdown = function($event) {...} where called when someone interacted with the Dropdown (see example of them here). After looking into the ui-bootstrap-tpls-0.10.0.js code I had to further adjust the html-code:
the attribute dropdown should be a class-value not a attribute itself.
is-open=... is not needed, ui-bootstrap will take care of it
attach a ng-click to the <a> element in the list.
This did not work for me (dropdown as an attribute):
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle"
ng-disabled="disabled">
Choose category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="category in interactions">
<a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
{{category.displayName}}
</a>
</li>
</ul>
</div>
But this did (add dropdown as a class value):
<!-- Single button -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle"
ng-disabled="disabled">
Choose category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="category in interactions">
<a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
{{category.displayName}}
</a>
</li>
</ul>
</div>
The rest of my Angular App looks like this then:
$scope.toggleDropdown = function($event) {
$event.preventDefault();
console.log('This is your event now: ', $event);
};
I know there are newer versions available of angular-ui-bootstrap, but for the record I put it up here. It works with version 0.10.0.
I have a dropdown button. If I select an item from the dropdown list, the main button's action should change to the items action, and the content too.
I tried one version, as you can see above, with controller:
<div class="btn-group">
<button type="button" class="btn" ng-click="mainFunction()">{{buttonCaption}}</button>
<button type="button" class="btn dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
Plunker example
But it's really ugly, and it would better with directive, for working more than one dropdown button. Somehow the directive should change the main button's ng-click behavior to the selected item's. Like this:
<!-- button one -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">{{button1.name}}</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>do something</li>
<li>do anything</li>
</ul>
</div>
<!-- button two -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-primary">{{button2.name}}</button>
<button type="button" class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
Is anybody have a good idea or an example for that?
One way to accomplish something similiar (works best if your actions change based on context):
<div class="btn-group" dropdown>
<button type="submit" class="btn btn-primary" ng-click="submit()">
{{selectedAction.name}}
</button>
<button class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="action in actions">
<a ng-click="setAction(action)">{{action.name}}</a>
</li>
</ul>
</div>
Have a set of actions in the controller:
$scope.actions = [
{id: 'action1', name: 'Action 1'},
{id: 'action2', name: 'Action 2'}
];
And a function to set the current action:
$scope.setAction = function(action) {
$scope.selectedAction = action;
};
Then, you treat submit() as a dispatcher - it checks selectedAction.id and does the right thing or calls the right function. If you need to trigger the action as the item is selected do it in setAction().