I Have a HTML code like this.
<div ng-if="!hide" class="dropdown pull-right" uib-dropdown>
<a uib-dropdown-toggle href="" >
<div class="btn btn-primary-outline btn-circle btn-xs pull-right comment-button">
<span class="icon icon-chevron-down"></span>
</div>
</a>
<ul class="dropdown-menu " style="text-align: center;" role="menu" uib-dropdown-menu>
<li role="divider" ng-if="showDelete">delete </li>
<li role="divider"> report</li>
</ul>
</div>
When using in protractor facing an issue with uib-dropdown selection.
I written code like this:
var dropDown = element(by.css("div[uib-dropdown]"));
dropDown.element(by.css("a[uib-dropdown-toggle]"));
dropDown.element(by.css("a[ng-click=deleteItem($index)]")).click();
browser.sleep(5000);
this.selectMenuOption = function (option) { //menu item to click
var dropdown = element(by.className('dropdown pull-right'));
dropdown.click();
dropdown.element(by.tagName('ul')).all(by.tagName('li')).filter(function (elem) {
return elem.getText().then(function (val) {
return val.toUpperCase() === option.toUpperCase();
})
}).first().click();
}
The a[ng-click=deleteItem($index)] is actually an invalid CSS selector, you needed to put the attribute value into quotes:
dropDown.element(by.css('a[ng-click="deleteItem($index)"]')).click();
Though, I'd go for a partial match that appears to be more readable:
dropDown.element(by.css('a[ng-click*=deleteItem]')).click();
where *= means "contains".
Or, you can even go for a "link text" locator:
dropDown.element(by.linkText('delete')).click();
dropDown.element(by.partialLinkText('delete')).click();
Related
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>
I am populating a dropdownbutton from a array. The whole key value pair is being shown as you see in the picture.
1) I need to show only the value of Label.
2) I want to have "ALL LOCATIONS" as a default item.
Here is how the Locations look like :
Locations:Array[2]
0:Object
$$hashKey:"object:772"
Id:1600
Label:"California"
__proto__:Object
1:Object
$$hashKey:"object:773"
Id:1600
Label:"Atlanta"
__proto__:Object
HTML :
<div class="btn-group btn-toolbar btn-margin-left" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
ALL LOCATIONS {{selectedItem}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label}}</a>
</li>
</ul>
</div>
js :
WotcDashBoardModuleService.GetDashBoardSummary(Ein).then(function (response) {
$scope.Summary = response.data.WotcSummary;
$scope.selectedItem;
$scope.dropboxitemselected = function (item) {
$scope.selectedItem = item;
//alert($scope.selectedItem);
}
console.log($scope.Summary);
});
Summary.Locations is your array of objects, so Label gets bound to each element individually. That means you need to show {{Label.Label}} instead of just {{Label}} and you'll see the name.
This part:
ALL LOCATIONS {{selectedItem}}
Should be replaced with:
<span ng-if="!selectedItem">ALL LOCATIONS</span>
<span ng-if="selectedItem" ng-bind="selectedItem.Label"></span>
Or with:
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
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'm fighting against my own grain on this, trying to learn.
I have a Bootstrap menu... Here's part of it:
<div id="language_menu" class="dropdown" on-toggle="toggled(open)">
<a class="dropdown-toggle" ng-model="clicked"> <span class="flag-xs flag-us"></span> <span class="small va-m">US</span> <i class="fa fa-angle-down"></i> </a>
<ul class="dropdown-menu">
<li><span class="flag-xs flag-in"></span> Hindu</li>
<li><span class="flag-xs flag-tr"></span> Turkish</li>
<li><span class="flag-xs flag-es"></span> Spanish</li>
</ul>
</div>
Here's the part of my controller in question:
$scope.toggled = function(open) {
if (open) {
$('#language_menu').find('.dropdown-menu').addClass('animated-shortest animated flipInX');
} else {
$('#language_menu').find('.dropdown-menu').removeClass('animated-shortest animated flipInX');
}
};
I'm confused as to the best method for this. ngClick vs dealing with it on the controller in the toggled function? You can see what I'm trying to achieve just by the jQuery. I know this is wrong, or maybe I'm skipping the angular way of handling it...
Please excuse me as I'm entirely new to Angular.
---- Update ----
Would it be considered improper to handle it this way?
<div id="language_menu" class="dropdown" on-toggle="toggled(open)" >
<a class="dropdown-toggle" href="#"> <span class="flag-xs flag-us"></span> <span class="small va-m">US</span> <i class="fa fa-angle-down"></i> </a>
<ul class="dropdown-menu {{theClass}}">
<li><span class="flag-xs flag-in"></span> Hindu</li>
<li><span class="flag-xs flag-tr"></span> Turkish</li>
<li><span class="flag-xs flag-es"></span> Spanish</li>
</ul>
</div>
$scope.toggled = function(open) {
if (open) {
$scope.theClass = 'animated-shortest animated flipInX';
} else {
$scope.theClass = '';
}
};
ngClass will help. Here's a working example: http://jsfiddle.net/tgg4eq4j/
Some code:
HTML:
<div ng-app="TestApp" ng-controller="TestCtrl">
<button ng-click="toggle()">Toggle</button>
<span ng-class="getClass()">I'm toggled</span>
</div>
And the JS:
var app = angular.module("TestApp", []);
app.controller("TestCtrl", ["$scope", function ($scope) {
var flag = true;
$scope.getClass = function () {
return flag ? "whitesmoke": "white";
}
$scope.toggle = function () {
flag = !flag;
};
$scope.class = "whitesmoke";
}]);
Use ngClass:
<div id="language_menu" ng-class="{'animated-shortest animated flipInX': open}" on-toggle="toggled(open)">
</div>