angular-dropdowns

WebJar for angular-dropdowns

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-jseppi-angular-dropdowns
Last Version

Last Version

1.5.1
Release Date

Release Date

Type

Type

jar
Description

Description

angular-dropdowns
WebJar for angular-dropdowns
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/jseppi/angular-dropdowns

Download github-com-jseppi-angular-dropdowns

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-jseppi-angular-dropdowns/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-jseppi-angular-dropdowns</artifactId>
    <version>1.5.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-jseppi-angular-dropdowns/
implementation 'org.webjars.npm:github-com-jseppi-angular-dropdowns:1.5.1'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-jseppi-angular-dropdowns/
implementation ("org.webjars.npm:github-com-jseppi-angular-dropdowns:1.5.1")
'org.webjars.npm:github-com-jseppi-angular-dropdowns:jar:1.5.1'
<dependency org="org.webjars.npm" name="github-com-jseppi-angular-dropdowns" rev="1.5.1">
  <artifact name="github-com-jseppi-angular-dropdowns" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-jseppi-angular-dropdowns', version='1.5.1')
)
libraryDependencies += "org.webjars.npm" % "github-com-jseppi-angular-dropdowns" % "1.5.1"
[org.webjars.npm/github-com-jseppi-angular-dropdowns "1.5.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

angular-dropdowns

Dropdown directives for AngularJS (1.1.5+, 1.2.x).

Includes both a select-style dropdown and a menu-style dropdown. The menu-style dropdown attaches to an existing element (button, link, div, etc), whereas the select-style dropdown replaces the element it is attached to.

See examples: http://jseppi.github.io/angular-dropdowns/

Usage

Include ngDropdowns in your module dependencies:

var app = angular.module('app', ['ngDropdowns']);

In your controller, setup the select options and object to hold the selected value:

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',
            someprop: 'somevalue'
        },
        {
            // Any option with divider set to true will be a divider
            // in the menu and cannot be selected.
            divider: true
        },
        {
            // Any divider option with a 'text' property will
            // behave similarly to a divider and cannot be selected.
            divider: true,
            text: 'divider label'
        },
        {
            // Example of an option with the 'href' property
            text: 'Option4',
            href: '#option4'
        }
    ];

    $scope.ddSelectSelected = {}; // Must be an object
});

And in your html, specify the dropdown-select and dropdown-model attributes on an element.

You can optionally set dropdown-item-label to specify a different label field from the default (which is 'text'):

<div ng-controller="AppCtrl">
    <h1>Dropdown Select</h1>
    <p>You have selected: {{ddSelectSelected}}</p>
    <div dropdown-select="ddSelectOptions"
        dropdown-model="ddSelectSelected"
        dropdown-item-label="text" >
    </div>
</div>

For a menu-style dropdown, use dropdown-menu in place of dropdown-select:

<div ng-controller="AppCtrl">
    <h1>Dropdown Select</h1>
    <p>You have selected: {{ddSelectSelected}}</p>
    <a href='' title=''
        dropdown-menu="ddSelectOptions"
        dropdown-model="ddSelectSelected"
        dropdown-item-label="text">
        Menu
    </a>
</div>

You can specify a function to call upon dropdown value change by specifying the dropdown-onchange attribute. This method will have the selected object passed to it.

<div dropdown-select="ddSelectOptions"
    dropdown-model="ddSelectSelected"
    dropdown-item-label="text"
    dropdown-onchange="someMethod(selected)" >
</div>

You can set dropdown-disabled to disable the dropdown when the bound value is truthy.

<div dropdown-select="ddSelectOptions"
    dropdown-model="ddSelectSelected"
    dropdown-disabled="isDropdownDisabled" >
</div>

Custom Templates

If you'd like to customize the templates more, you can override the values stored in the following $templateCache keys:

  • ngDropdowns/templates/dropdownSelect.html
  • ngDropdowns/templates/dropdownSelectItem.html
  • ngDropdowns/templates/dropdownMenu.html
  • ngDropdowns/templates/dropdownMenuItem.html

To do this, you can put your custom templates in the cache from your app.run() method. For example:

var app = angular.module('app', ['ngDropdowns']);

app.run(function ($templateCache) {
  $templateCache.put('ngDropdowns/templates/dropdownSelect.html', [
    '<div class="wrap-dd-select my-custom-class">',
      '<span class="selected my-selected-class">{{dropdownModel[labelField]}}</span>',
      '<ul class="custom-dropdown">',
        '<li ng-repeat="item in dropdownSelect"',
        ' class="dropdown-item"',
        ' dropdown-select-item="item"',
        ' dropdown-item-label="labelField">',
        '</li>',
      '</ul>',
    '</div>'
  ].join(''));
});

Developing

Pull requests are welcome!

Run npm install to get all the development dependencies.

Run gulp to build the output files.

License

MIT

Credits

Styling based on http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

Versions

Version
1.5.1