Dynamic dropdown menu Angular and Bootstrap - javascript

Trying to create a dynamic dropdown menu for a button. Preloading the menu from server as json and that part works fine but for some reason bootstrap doesn't display the menu items except for the last in the array.
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-camera"></span> Select images to view <b class="caret"></b>
</button>
<ul ng-repeat="tag in tags" class="dropdown-menu">
<li>{{tag}}</li>
</ul>
</div>
The variable 'tags' contains the preloaded array.
Tried on chrome and IE with the same result.
If I remove the class 'dropdown-menu' from the ul element the complete bullet list will be displayed like:
<Button>
foo *
* bar
* baz
For info:
The app.js part populating the tags variable:
this.loadTags = function () {
$http.get('http://localhost:5566/api/tags').
success(function (data, status, headers, config) {
$scope.tags = data.tags;
}).
error();
}
(This works fine however)

Found the problem after some experimenting. Moved the ng-repeat to the li element as
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-camera"></span> Select images to view <b class="caret"></b>
</button>
<ulclass="dropdown-menu">
<li ng-repeat="tag in tags">{{tag}}</li>
^^^^^^^^^^^^^^^^^^^^^^^
</ul>
</div>

Related

How can i click this button and li with CasperJS

I want to click this button and choose what i want the date selection.
My Document:
<div class="input-group-btn open">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">選取
<span class="caret"></span>
</button>
<ul id="mnuShowingDate" class="dropdown-menu pull-right">
<li>2017/07/29 (週六)</li>
<li>2017/07/30 (週日)
</li><li>2017/07/31 (週一)</li>
<li>2017/08/01 (週二)</li>
<li>2017/08/02 (週三)</li>
<li>2017/08/03 (週四)
</li>
</ul>
</div>
I only know use the click function like this:
casper.then(function () {
this.click('button.btn.btn-danger.dropdown-toggle');
});
It works , but i want to click the second li which is 2017/07/30 now.
How can i select it ? Any ideas? Thanks in advance.

How can I display the selected element of a dropdown list in a button?

I have this dropdown menu:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
All Categories
<span class="caret"></span></button>
<ul class="dropdown-menu" ng-model = "cat">
<li>All Categories</li>
<li role="separator" class="divider"></li>
<li>Clothes</li>
<li>Electronics</li>
<li>Books</li>
<li>Other</li>
</ul>
</div>
What can I do to display the chosen element from the list instead of the label of the button which is "All Categories". Alternatively can I remove the label and just set the default selected item to be the first one, which is also "All Categories"?
Also, another question, how can I access the selected value in a JS file using angular?
$scope.cat.value
Doesnt seem to work.
Declare a $scope.selected variable in your angularjs code.Modify your list-item tags (options) adding ng-click from angularjs for setting the selected variable value. For example:
<li ng-click="selected = 'option1'"><a>Option1</a></li>
If you click it, then the selected variable will be assigned the value "option1".
Another option could be to call a function from angular code inside the ng-click:
ng-click="selectItem('option1')"
Then in angular code:
$scope.selectItem = function(value) { $scope.selected = value; }
If you want to get the value of your angular scope variables just do $scope.variable. In this case it will be $scope.selected

AngularJs ng-click not working on Bootstrap dropdown

I am using bootstrap 3 CSS only without bootstrap js or jQuery with AngularJs framework, But I have a very basic usage issue which is ng-clicknot get fired on bootstrap dropdown
HTML
<div class="fc-couponThumbnail">
<i class="icon-ok" ng-if="coupon.couponMainImage=='couponThmub1'"></i>
<div class="dropdown">
<button type="button" class="dropdown-toggle" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li ><a ng-click="coupon.couponMainImage='couponThmub1';">set main image</a></li>
<li><a ng-click="coupon.couponThmub1=''">delete</a></li>
</ul>
</div>
as I am not using bootstrap js so I made this directive to get dropdown toggled
angular.module('FansCoupon').directive('dropdownToggle', function () {
return{
restrict:'C',
link:function(scope,ele,attrs){
ele.on('click', function () {
ele.parent().toggleClass('open')
})
ele.on('blur', function () {
ele.parent().removeClass('open')
})
}
}
})
Edit I
When I instantiate .dropdown with open class the ng-click work properly!
Edit II
calling a function instead of do javascript directly in ng-click didn't worked too.
Finally the solution for my issue was to use Angular UI Bootstrap which handling all bootstrap components as angular Js directives so I used uib-dropdown,uib-dropdown-toggle and uib-dropdown-menu
and my code now looks like :
<div class="dropdown" uib-dropdown >
<button type="button" uib-dropdown-toggle class="dropdown-toggle" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu >
<li ><a ng-click="coupon.couponMainImage=coupon.couponThmub4;">set main image</a></li>
<li><a ng-click="coupon.couponThmub4=''">delete</a></li>
</ul>

AngularJS bootstrap dropdown not working in IE 11

I have a drop-down of AngularJS Bootstrap which displays two options. It works completely fine in FF and Chrome but IE shows a weird behavior. The drop-down doesn't show the options and seem to be hidden. After resizing the window, the options are shown just like a dropdown works.
Angular version is used is 1.4.3
Here's my code
<div class="btn-group ViewEditOption" dropdown>
<button id="single-button" type="button" class="btn btn-default" style="width: 100px; font-size: 14px; color: #364395;"
dropdown-toggle ng-disabled="disabled">
Can {{user.projectRoleName}} <span class="caret" style="margin-left: 5%;"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="role in availableRoles"><a class="dd" href="#" ng-click="updateRole($event, user, role)">
Can {{role.name}}</a></li>
</div>
Its a actually a problem with Bootstrap version 3.3.5. There's an incompatibility on certain versions of IE on Windows 8.
You can downgrade to version 3.1.1. It'll work fine
I think that the problem is with some other section of the code. I have created a sample of Ui-Bootstrap Dropdown.
Html
<div ng-controller="DropdownCtrl">
<div class="btn-group" dropdown>
<button id="single-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" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="item in items">
{{item}}
</li>
</ul>
</div>
</div>
Angular
var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('DropdownCtrl', function ($scope) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.updateRole =function(event,item){
console.log(event.target);
console.log(item);
}
});
Please refer this plunker.
I have tested this code on IE-9 and IE-11 and this code is working.

Bootstrap dropdown on hover not working, what am I doing wrong?

I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what?
Here is my HTML:
<a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown">
<button type="button" class="btn btn-primary">Filters</button>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<div class="results-filter">
Content goes here
</div>
</li>
</ul>
and my jQuery:
jQuery('#dropdown-filter').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
});
It works when I click on top, but not when I hover.
jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter.
.find() searches for children.
Use jQuery(this).next('.dropdown-menu')...

Categories

Resources