jseppi / angular-dropdowns Goto Github PK

Can we have ability to close any current open dropdown on selecting other when we have multiple on a page.

Thanks.

This does not seem to be working in IE.
At least the demo on fiddler does not work for sure.

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?

Is there somehow can we remove the jquery dependency from in here?

https://npmcdn.com/#/

ref: simple-statistics/simple-statistics#150 (comment)

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!

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

how i translate text of the dropdown

Hey amazing plugin here.

Quick question, can I specify my custom html templates instead of the text option?

Cheers

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

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

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.

whe the drop down will recive the 1k record it will hang in IE..
need help on it ...

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', [
'

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?

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?

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!!!

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 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?

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?

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
}

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.

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.

Would love to have ability to add to tab index.

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

Could you provide a bower or npm package of this pretty library please?

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);
});

Hello. Thanks for the great solution! Any ideas how to achieve modal behavior for dropdowns? When opening one dropdown automatically closes all others.

Hi,

Great job! This directive is very useful.

I think 2 additional features would improve it.

• Copy/pass only one of the property value of selected object instead of the full object. This can be done by adding a new attribute with the property name (ie dropdown-value="{{'prop_name'}}").
• Call a parent scope function when an item is selected (ie dropdown-onselect="myfunc()").

Maybe I can contribute to the project if you wish ?

Thanks,
Alexis

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?

'dropdownMenu' and 'dropdownSelect' directives has a following code

          if (selected !== $scope.dropdownModel) {
            angular.copy(selected, $scope.dropdownModel);
          }

There is two troubles.

1. angular.copy ignores $$hashKey attribute, as the result we have a mixing objects. Why not explicit assignment?
2. should be used for comparision angular.equals

As result:

          if (!angular.equals(selected, $scope.dropdownModel)) {
              $scope.dropdownModel = selected;
          }

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

It would be great if the menu items could also trigger actions other than following links.

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.

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.

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.

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?

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.

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?

Are the directives supported for AngularJS 1.4.x versions ?

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.

could we get this on npm as well?

How do we validate this dropdown as required in a from?

If you select an option that is already selected you get this error: https://docs.angularjs.org/error/ng/cpi.

Im trying to clear the dropdown so if i selected an item and trying to reset it how do i do that?

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!

ref: #64 (comment)

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.