jseppi / angular-dropdowns Goto Github PK
View Code? Open in Web Editor NEWSimple, standalone dropdown directives for AngularJS.
Simple, standalone dropdown directives for AngularJS.
How can I customize the template to apply css to the selected element in the dropdown list? In other words, I would like the selected item in the dropdown to have a different css class.
Thanks!!!
Can we have ability to close any current open dropdown on selecting other when we have multiple on a page.
Thanks.
Hi,
Please could you add the below line of code to use the iconCls in the templates DropdownSelectItem and dropdownMenuItem. or if you think the code needs to be added in the controller function you need to provide more options in the template with a loop condition to populate various element classes.
' ',
ex 👎
$templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [
'
What if you have multiple instance of the directive? I think you need to have unique model for each instance? Maybe add an ID isolate scope and prefix the id to the model name per instance, so the model don't collide?
Hi,
Great job! This directive is very useful.
I think 2 additional features would improve it.
Maybe I can contribute to the project if you wish ?
Thanks,
Alexis
I wanted to implement this library to an angularjs project I'm currently working on but I got stuck when I couldn't respond to a change event. Is there any way I could know if a different option has been selected? Or is there any other way to detect the change in the controller?
how i translate text of the dropdown
Are the directives supported for AngularJS 1.4.x versions ?
By following your instructions and using the example.html page, I got the menu button running in a div by itself. However, when I have 2 child divs of a parent div with angular-google-maps (displaying Google Maps) in one child and angular-dropdowns in the other child, I could not get both to run at the same time. I tried your ng-app and ng-controller in all the sensible permutations and combinations of the divs and Google Map did not appear when the button dropdown was working. Either the dropdown code has a problem or some very different instructions are needed when dropdown is not the only AngularJS component on the page. I have given 3 days to this, and now I've decided to build the button myself from some tutorials I've found.
Hi,
I'm using angular-dropdowns in my project and it's working seamlessly so far. I'm not able to figure out how to use angular-translate with dropdown options. I have used angular-translate in other view using:
{{someText|translate}}
but not now since I'm giving an array of options with their corresponsing values as described in the examples. Can anyone please tell me how can I use angular-translate here in this scenario ?
Scenario from the given example:
app.controller('AppCtrl', function($scope) {
// By default the 'text' property will be used as the display text in the dropdown entry.
// All options that are not dividers must have a 'text' property.
// You can specify a different property name in place of 'text' via the dropdown-item-label attribute.
// A divider with a 'text' property will also be non-selectable.
//
// If an options object has an 'href' property set, then that dropdown entry
// will behave as a link and cannot be selected.
$scope.ddSelectOptions = [
{
text: 'Option1',
value: 'a value'
},
{
text: 'Option2',
value: 'another value'
}
];
$scope.ddSelectSelected = {}; // Must be an object
});
Now, if I want to translate Option1 and Option2 using angular translate in my controller/view, how can I do it?
P.S: I tried my regular approach by using
{{"Option1"|translate}} and {{"Option12"|translate}}
app.controller('AppCtrl', function($scope) {
// By default the 'text' property will be used as the display text in the dropdown entry.
// All options that are not dividers must have a 'text' property.
// You can specify a different property name in place of 'text' via the dropdown-item-label attribute.
// A divider with a 'text' property will also be non-selectable.
//
// If an options object has an 'href' property set, then that dropdown entry
// will behave as a link and cannot be selected.
$scope.ddSelectOptions = [
{
text: '{{Option1|translate}}',
value: 'a value'
},
{
text: '{{Option2|translate}}',
value: 'another value'
}
];
$scope.ddSelectSelected = {}; // Must be an object
});
but somehow that is also not working.
Can anyone please help me with this ?
Thanks
Hi.
I've got a weird issue.
Everything works fine until i tried to use ngRoute and ng-view.
Here is my code :
var app = angular.module('toolApp', ['ngDropdowns', 'ngRoute']);
app.config(['$routeProvider',
function($routeProvider)
{
$routeProvider.
when('/',
{
template: " ",
controller: 'HomeCtrl',
})
}]);
app.controller('HomeCtrl', function($scope)
{
console.log('homeCtrl');
$scope.ddSelectOptions = [
{
text: 'France',
value: 'FRA'
},
{
text: 'Brazil',
value: 'BRA',
},
{
text: 'Spain',
value: 'ESP',
},
];
$scope.ddSelectSelected =
{
text: "All Countries"
};
});
And here is the html :
<div ng-view>
<div
dropdown-select="ddSelectOptions"
dropdown-model="ddSelectSelected"
dropdown-item-label="text"
dropdown-onchange="onChange(selected)"
>
</div>
</div>
Then i've got this issue :
Error: [$compile:ctreq] Controller 'dropdownSelect', required by directive 'ngClass', can't be found!
I don't really know what cause this issue, i'm quit new at Angular.
Thanks !
Ludo
If you select an option that is already selected you get this error: https://docs.angularjs.org/error/ng/cpi.
Hi,
currently, using ng-class on the dropdown doesn't work because it is internally used. It result in something like that :
<div ng-class="{'am-input-error': configurator.dealerErrors.Dealer} {'disabled': dropdownDisabled}" ...>
Do you think it would be possible to add support for ng-class, or to add an attribute allowing us to add css class dynamically depending a variable ?
It should be very nice to error management.
Thanks
Hi nice project, having a little difficulty setting the default on the drop down I understand in the controller I can achieve this by setting
$scope.ddCountryMenuSelected = {text:"Country"};
However if I want to use angular-translate I would normally have to enter something like
{{'DIARY_DEFAULT_COUNTRY_LABEL' | translate}}
If I put this in the controller it obviously just appears as that text, any ideas how I could get round this?
The title says it all. Those jQuery plugins have it, is there any chance that it will be implemented to this too? How can I achieve such effect for now?
The spaces look nice for aligning in the templates but they add to the overall file size since they aren't minified: https://github.com/jseppi/angular-dropdowns/blob/v0.3.0/angular-dropdowns.js#L43-L52
Original:
template: "<div class='wrap-dd-select'>" +
" <span class='selected'>{{dropdownModel[labelField]}}</span>" +
" <ul class='dropdown'>" +
" <li ng-repeat='item in dropdownSelect'" +
" class='dropdown-item'" +
" dropdown-select-item='item'" +
" dropdown-item-label='labelField'>" +
" </li>" +
" </ul>" +
"</div>"
Minifier-friendly:
template: [
"<div class='wrap-dd-select'>",
"<span class='selected'>{{dropdownModel[labelField]}}</span>",
"<ul class='dropdown'>",
"<li ng-repeat='item in dropdownSelect'",
" class='dropdown-item'",
" dropdown-select-item='item'",
" dropdown-item-label='labelField'>",
"</li>",
"</ul>",
"</div>"
].join('')
the array join is just a personal perference.
I am using this to make a dropdown for U.S. states and the issue is that with 50 options the dropdown is awkwardly large. Does angular-dropdowns have the ability to make the dropdowns smaller and scrollable ?
The dropdown code is great - a lot better than Angular UI method - but I am having problems with display above a table = the table is shown over the dropdown - example as follows:
I have reproduced it your demo fiddlejs http://jsfiddle.net/r6xoLwh0/2/
I as sure it is my lack of css knowledge which is the problem - but I just can't solve it - I known it is caused by position: relative - but don't know why!
Could you provide a bower or npm package of this pretty library please?
'dropdownMenu' and 'dropdownSelect' directives has a following code
if (selected !== $scope.dropdownModel) {
angular.copy(selected, $scope.dropdownModel);
}
There is two troubles.
As result:
if (!angular.equals(selected, $scope.dropdownModel)) {
$scope.dropdownModel = selected;
}
Hi!
Is being taken into account this feature?
I have the case where I need to change the value of a dropdown and then trigger the onchange method based on another combo selection.
Any help would be appreciated, thanks!
Is it possible to have conditional dropdownOptions?
I have a list of items. Each as a dropdown on it. In function of the item I would like to have different dropdown options.
In the fiddle it the carrot seems to be about 5px too far right from the button being clicked.
The following changes seem to have fixed it:
.wrap-dd-menu .dropdown:before {
right: 100px
}
.wrap-dd-menu .dropdown:after {
right: 102px
}
There's a line on 153 for directive dropdownMenu
that has this:
var $wrap = $compile(angular.element(
'<div class="wrap-dd-menu" ng-class="{\'disabled\': dropdownDisabled}"></div>')
)($scope);
it seems a bit too rigid, and we can't modify it. dropdownSelect
seems to have this built into the templateCache. Shouldn't the menu's wrap be moved out to templateCache as well?
Hello. Thanks for the great solution! Any ideas how to achieve modal behavior for dropdowns? When opening one dropdown automatically closes all others.
Would love to have ability to add to tab index.
When we set value for dropdown-model from controller, then it replace the first value for dropdown-select. its happening for dynamic data for selectbox options.
This is great. I am trying to tie this up with my json file but i am hitting a bump:
say you have something of the sort:
$http.get('/json/sections').success(function(result) {
$scope.sections = (function () {
return result.results;
})();
});
Woking fine with a regular ng-repeat, but how would you tie it with with 'name', 'href' etc. Obviously if I do div style="cursor:pointer; width:100px; margin:0 auto;" dropdown-menu="sections" like in your example, I get the right number of entries, but all empty. thought I would ask!
Still pretty new at angular, thanks in advance for your help
Hey amazing plugin here.
Quick question, can I specify my custom html templates instead of the text
option?
Cheers
ref: #64 (comment)
How do we validate this dropdown as required in a from?
The template is missing the labelField referrence inside of the span tag.
Things are going well. Thanks again for your help.
An enhancement would be to have 2 or more buttons on a page, and each has its own styling, eg. different dropdown widths, different font colors, etc
I see the line in the directive that calls class="wrap-dd-menu", but I don't know how to have 1 directive branch to several css instructions.
This does not seem to be working in IE.
At least the demo on fiddler does not work for sure.
It looks like a click handler is attached to the dom regardless if there is an active dropdown: https://github.com/jseppi/angular-dropdowns/blob/v0.3.0/angular-dropdowns.js#L184
Maybe you should do the bind in the register method and in the unregister, check to see if the dropdown array is empty and if it is, remove the binding.
Hello,
You should add tags to the github repository, this way we can ask for a specific version with bower.
https://github.com/bower/bower#registering-packages
For example, if I put this in my bower.json file :
{
...
"dependencies": {
...
"angular-dropdowns": "0.1.0",
...
}
}
And then run bower install
, it shows me the following error :
bower angular-dropdowns#0.1.0 not-cached git://github.com/jseppi/angular-dropdowns.git#0.1.0
bower angular-dropdowns#0.1.0 resolve git://github.com/jseppi/angular-dropdowns.git#0.1.0
bower angular-dropdowns#0.1.0 ENORESTARGET No tag found that was able to satisfy 0.1.0
Thanks.
Is there somehow can we remove the jquery dependency from in here?
I think that it would be useful if we could add custom HTML as text for the items. I'm looking for a styled select just for this reason. In my case I need to show a small square filled with a color, because the user has to choose a color from a list but we have many "blue" and we can't simply use the hex code.
Dropdown isn't closing on select after adding dropdown-onchange. I am creating a timeout event and an emit in the change function. Any idea why is this happening? Or any way to manually close the dropdown?
whe the drop down will recive the 1k record it will hang in IE..
need help on it ...
Im trying to clear the dropdown so if i selected an item and trying to reset it how do i do that?
Hello,
is there any additional files or folders that need to be created when customizing the output template?
I've put the the following code on my controller:
app.run(function ($templateCache) {
$templateCache.put('ngDropdowns/templates/dropdownSelect.html', [
'
and put the following code on my homepage.html:
div ng-controller="homeController" hide-gt-sm show-sm>
Cari Penyedia Jasa
/div
but it's still not working, am I missing something else?
Hi,
what's the point of this line?
https://github.com/jseppi/angular-dropdowns/blob/master/angular-dropdowns.js#L142
Was wondering if the solution in thtis answer would be another possible solution.
http://stackoverflow.com/questions/18920644/angularjs-link-element-to-controller-in-directive
Is this a way to attach controller to template?
It would be great if the menu items could also trigger actions other than following links.
Hi there, thanks for the directives.
I've been having issues with touch devices not closing the dropdown on select, it works fine on desktop browsers but it seems touch doesn't propagate the click event so I fixed the issue with the following code. Sorry I don't have time to make a proper PR.
this.select = function (selected) {
if (selected !== $scope.dropdownModel) {
angular.copy(selected, $scope.dropdownModel);
}
$scope.dropdownOnchange({
selected: selected
});
DropdownService.toggleActive($element);
};
$element.bind('click', function (event) {
// handle select toggles above in the select function
var target = angular.element(event.srcElement || event.target);
while (target[0] !== $element[0]) {
if (target.hasClass('dropdown-item')) return;
target = target.parent();
}
event.stopPropagation();
DropdownService.toggleActive($element);
});
Hi,
It would be nice if we can have option disabling feature. So that the option should not get highlighted nor selectable. If such feature is available, I would like to use it for Header option something equivalent like in a select box.
Also while declaring options, if you can provide addtional attributes to input class or style that would be a great help.
Hi,
I have a specific use of the dropdownSelect. I need to manually compile and link an element with this directive but I have an issue which is connected to dropdownItemLabel attribute. The value of labelField is taken from that attribute and in my case this is a problem because I would like it to be $interpolated and this implementation prevents it from doing so.
Why this isn't passed as a property of the scope of dropdownSelect? Is there a perticular reason?
Regards,
Bartosz Domżalski
could we get this on npm as well?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.