npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pg-ng-dropdown

v1.1.1

Published

Pagar.me directive to provide a simple and quick dropdown from a provided array of options

Downloads

17

Readme

pagarme-ng-dropdown

Pagar.me directive to provide a simple and quick dropdown from a provided array of options

For angular versions < 1.3 that does not supports bindToController , you should see this branch.

Check the demo here

Installation

Install via npm package manager:

$ npm install pg-ng-dropdown

Import the directive file into your project:

<script src="node_modules/pg-ng-dropdown/dest/pg-ng-dropdown.min.js"></script>

If you wish the same style of the example, import the css.

<link rel="stylesheet" type="text/css" href="dest/css/pg-ng-dropdown.min.css">

Load the pg-ng-dropdown module:

angular.module('myApp', ['pg-ng-dropdown']);

Call the directive in an element via attribute, class or tag name:

<div data-pg-ng-dropdown></div>
<div class="pg-ng-dropdown"></div>
<pg-ng-dropdown></pg-ng-dropdown>

Pass the data via attribute:

<div data-pg-ng-dropdown data-options="myOptionsArray"></div>

Give a model to the dropdown:

<div data-pg-ng-dropdown data-model="myModel" data-options="myOptionsArray"></div>

Array expected format

The options array must contains one JSON for each option.

Example:

var myOptionArray = [
		{
			text: 'Carl Sagan',
			image: 'img/carl.png' //if image-options is set to true
			value: 0,
		},
		{
			text: 'Stephen Hawking',
			image: 'img/stephen.png' //if image-options is set to true
			value: 1,
		},
		{
			text: 'Michio Kaku',
			image: 'img/michio.png' //if image-options is set to true
			value: 2,
		}
];

Directive Optionals

You can choose what property from the json you wish to be used as value for the model, instead of the default value. On the given example below, the text of the option will be set to the model, instead of its value.

<div data-pg-ng-dropdown data-value-property="text" data-model="myModel" data-options="myOptionsArray"></div>

Also choose the object property to display the text of the option, instead of the default text:

<div data-pg-ng-dropdown data-text-property="diffTextProp" data-options="myOptionsArray"></div>

You can do the same to set the image url of the option, instead of the default image:

<div data-pg-ng-dropdown data-text-property="diffImageProp" data-options="myOptionsArray"></div>

Set the empty text that will be displayed when model is empty or does not matches any of the options:

<div data-pg-ng-dropdown data-empty-text="Choose an option" data-options="myOptionsArray"></div>

Enable image options (default is false):

<div data-pg-ng-dropdown data-image-options="true" data-options="myOptionsArray"></div>

Opened dropdown class (default is opened):

<div data-pg-ng-dropdown data-opened-class="my-opened-class" data-options="myOptionsArray"></div>

Selected option class (default is selected):

<div data-pg-ng-dropdown data-selected-class="my-selected-class" data-options="myOptionsArray"></div>

Option selected/changed custom function:

<div data-pg-ng-dropdown data-onchange="myFunction" data-options="myOptionsArray"></div>

Dynamic Height support:

<div data-pg-ng-dropdown data-dynamic-height="true" data-options="myOptionsArray"></div>

To simulate ng-disabled functionality, you must pass a function that return the disabled condition result:

$scope.disabled = function(){

	return $scope.valA !== $scope.valB;
	
};
<div data-pg-ng-dropdown disabled="disabled()" data-options="myOptionsArray"></div>

Registered Scope Events

You can communicate with each of the dropdowns in your page by naming them with the attribute name:

<div data-pg-ng-dropdown name="myDropdown" data-options="myOptionsArray"></div>

And you can open and close a dropdown trough scope events by passing as data the name of the directive:

//opening
$scope.$broadcast('pg-dropdown-open', {
	name: 'myDropdown'
});

//closing
$scope.$broadcast('pg-dropdown-close', {
	name: 'myDropdown'
});

You can also select a given option:

//select the third option
$scope.$broadcast('pg-select-option', {
	name: 'myDropdown',
	index: 2,
});

Accessibility

Supports tab index, with enter, esc, up and down arrows controls. Enter key opens the focused dropdown and esc closes it. Use up and down arrow to choose an option and press enter again to select it.

Testing

This directive has e2e testing specs done by protractor. Follow protractor's instructions, run gulp server task and run testing command protractor protractor.conf.js to run the test cases.

And that's it :D

Rafael Violato @ pagar.me