Convert Figma logo to code with AI

angular-ui logoui-select

AngularJS-native version of Select2 and Selectize

3,259
1,816
3,259
494

Top Related Projects

25,883

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

21,849

Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.

The Select Component for React.js

Simple autocomplete pure vanilla Javascript library.

29,388

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Quick Overview

UI-Select is an AngularJS replacement for select elements. It provides a customizable dropdown list with features like search, tagging, and remote data sets. The project aims to enhance the user experience of selecting items from a list, especially when dealing with large datasets or complex selection requirements.

Pros

  • Highly customizable appearance and behavior
  • Supports single and multiple selections
  • Integrates well with AngularJS applications
  • Allows for asynchronous data loading

Cons

  • Limited to AngularJS 1.x, not compatible with Angular 2+
  • Performance can degrade with very large datasets
  • Learning curve for advanced customizations
  • No longer actively maintained (as of 2023)

Code Examples

  1. Basic usage with an array of strings:
<ui-select ng-model="ctrl.selected">
  <ui-select-match placeholder="Select a color">{{$select.selected}}</ui-select-match>
  <ui-select-choices repeat="color in ctrl.colors | filter: $select.search">
    <span ng-bind-html="color | highlight: $select.search"></span>
  </ui-select-choices>
</ui-select>
  1. Multiple selection with objects:
<ui-select multiple ng-model="ctrl.selectedPeople" theme="bootstrap">
  <ui-select-match placeholder="Select people...">{{$item.name}}</ui-select-match>
  <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small ng-bind-html="person.email | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>
  1. Asynchronous data loading:
<ui-select ng-model="ctrl.address.selected"
           theme="bootstrap"
           ng-disabled="ctrl.disabled"
           reset-search-input="false">
  <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
  <ui-select-choices repeat="address in ctrl.addresses track by $index"
                     refresh="ctrl.refreshAddresses($select.search)"
                     refresh-delay="0">
    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

Getting Started

  1. Install UI-Select via npm:

    npm install ui-select
    
  2. Include the necessary files in your HTML:

    <link rel="stylesheet" href="node_modules/ui-select/dist/select.min.css">
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/ui-select/dist/select.min.js"></script>
    
  3. Add 'ui.select' as a dependency in your Angular module:

    angular.module('myApp', ['ui.select']);
    
  4. Use the <ui-select> element in your HTML as shown in the code examples above.

Competitor Comparisons

25,883

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Pros of Select2

  • Wider browser compatibility, including older versions of Internet Explorer
  • More extensive documentation and larger community support
  • Supports both jQuery and native JavaScript implementations

Cons of Select2

  • Requires jQuery as a dependency (for the jQuery version)
  • Heavier in terms of file size compared to ui-select
  • Not specifically designed for Angular, which may lead to integration challenges

Code Comparison

ui-select:

<ui-select ng-model="selectedItem">
  <ui-select-match placeholder="Select an item">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="item in items | filter: $select.search">
    <span ng-bind-html="item.name | highlight: $select.search"></span>
  </ui-select-choices>
</ui-select>

Select2:

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

Both libraries offer powerful select box enhancements, but ui-select is tailored for Angular applications, while Select2 provides a more versatile solution for various web development scenarios. The choice between them depends on the specific project requirements, framework preferences, and desired features.

Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

Pros of selectize.js

  • Framework-agnostic, can be used with various JavaScript libraries or frameworks
  • More extensive customization options and plugins
  • Better performance for large datasets

Cons of selectize.js

  • Steeper learning curve due to more complex API
  • Less seamless integration with Angular applications
  • Requires more manual setup for advanced features

Code Comparison

selectize.js:

$('#select-beast').selectize({
    create: true,
    sortField: 'text'
});

ui-select:

<ui-select ng-model="ctrl.person.selected">
  <ui-select-match>{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="person in people | filter: $select.search">
    {{person.name}}
  </ui-select-choices>
</ui-select>

Key Differences

  • ui-select is specifically designed for Angular applications, offering tighter integration with Angular's ecosystem
  • selectize.js provides more flexibility for use across different frameworks and vanilla JavaScript projects
  • ui-select syntax is more declarative and Angular-like, while selectize.js uses a more traditional JavaScript approach
  • selectize.js offers more built-in features and plugins out of the box, whereas ui-select may require additional customization for advanced functionality

Both libraries provide powerful select/dropdown functionality, but the choice between them largely depends on the specific project requirements and the development environment.

21,849

Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.

Pros of Chosen

  • Lightweight and easy to implement
  • Works with both jQuery and Prototype
  • Extensive browser compatibility, including older versions

Cons of Chosen

  • Not specifically designed for Angular applications
  • Less integration with Angular's two-way data binding
  • Limited customization options compared to ui-select

Code Comparison

Chosen implementation:

<select data-placeholder="Choose a country..." class="chosen-select" multiple>
  <option value=""></option>
  <option value="US">United States</option>
  <option value="UK">United Kingdom</option>
</select>

ui-select implementation:

<ui-select multiple ng-model="selectedCountries" theme="bootstrap">
  <ui-select-match placeholder="Choose a country...">{{$item.name}}</ui-select-match>
  <ui-select-choices repeat="country in countries | filter: $select.search">
    {{country.name}}
  </ui-select-choices>
</ui-select>

Summary

Chosen is a versatile and widely compatible select enhancement plugin, suitable for various web projects. However, ui-select offers tighter Angular integration and more advanced features for Angular-specific applications. The choice between the two depends on the project's requirements, with Chosen being more general-purpose and ui-select catering specifically to Angular developers.

The Select Component for React.js

Pros of react-select

  • More active development and larger community support
  • Extensive customization options and theming capabilities
  • Better performance for large datasets and complex scenarios

Cons of react-select

  • Steeper learning curve for beginners
  • Requires additional setup for use with form libraries

Code Comparison

ui-select:

<ui-select ng-model="selectedItem">
  <ui-select-match placeholder="Select an item">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="item in items | filter: $select.search">
    <span ng-bind-html="item.name | highlight: $select.search"></span>
  </ui-select-choices>
</ui-select>

react-select:

import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

<Select options={options} />

Summary

react-select offers more flexibility and better performance for complex use cases, while ui-select provides a simpler integration with AngularJS applications. react-select has a more active community and frequent updates, but may require more setup time. ui-select is easier to use for basic scenarios but has limitations in customization and handling large datasets.

Simple autocomplete pure vanilla Javascript library.

Pros of autoComplete.js

  • Lightweight and dependency-free, making it easier to integrate into various projects
  • Supports multiple data sources, including JSON, Arrays, and Functions
  • Highly customizable with extensive configuration options

Cons of autoComplete.js

  • Limited to vanilla JavaScript, while ui-select is specifically designed for AngularJS applications
  • May require more manual setup and integration compared to ui-select's Angular-specific features
  • Lacks some advanced features like multi-select and tagging that ui-select provides out of the box

Code Comparison

ui-select:

<ui-select ng-model="selectedItem">
  <ui-select-match placeholder="Select an item">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="item in items | filter: $select.search">
    <span ng-bind-html="item.name | highlight: $select.search"></span>
  </ui-select-choices>
</ui-select>

autoComplete.js:

const autoCompleteJS = new autoComplete({
  selector: "#autoComplete",
  data: {
    src: items,
    key: ["name"]
  },
  resultItem: {
    highlight: true
  }
});

Both libraries offer autocomplete functionality, but ui-select is tightly integrated with AngularJS, while autoComplete.js provides a more flexible, framework-agnostic solution. The choice between them depends on the specific project requirements and the development environment.

29,388

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Pros of Sortable

  • Framework-agnostic, works with vanilla JavaScript and various frameworks
  • Supports touch devices and nested sortable lists
  • More versatile, can be used for drag-and-drop functionality beyond just select elements

Cons of Sortable

  • Requires more setup and configuration for complex use cases
  • Less focused on select functionality, may require additional work for dropdown-style selects
  • Larger file size due to broader feature set

Code Comparison

ui-select:

<ui-select ng-model="selectedItem">
  <ui-select-match>{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="item in items | filter: $select.search">
    {{item.name}}
  </ui-select-choices>
</ui-select>

Sortable:

new Sortable(document.getElementById('list'), {
  animation: 150,
  ghostClass: 'blue-background-class',
  onSort: function (evt) {
    // Handle sort event
  }
});

Key Differences

  • ui-select is specifically designed for AngularJS and focuses on select functionality
  • Sortable is more flexible and can be used for various drag-and-drop scenarios
  • ui-select provides a more opinionated structure for select elements
  • Sortable requires manual DOM manipulation and event handling for similar functionality

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

AngularJS ui-select Build Status Gitter PRs Welcome

AngularJS-native version of Select2 and Selectize. http://angular-ui.github.io/ui-select/

Getting Started

Latest Changes

Features

  • Search, Select, Multi-select and Tagging
  • Multiple Themes: Bootstrap, Select2 and Selectize
  • Keyboard support
  • No jQuery required (except for old browsers)
  • Small code base: 4.57KB min/gzipped vs 20KB for select2

For the roadmap, check issue #3 and the Wiki page.

Installation Methods

npm

$ npm install ui-select

bower

$ bower install angular-ui-select

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install global dev dependencies: npm install -g gulp
  • Install local dev dependencies: npm install in repository directory

Development Commands

  • gulp to jshint, build and test
  • gulp build to jshint and build
  • gulp test for one-time test with karma (also build and jshint)
  • gulp watch to watch src files to jshint, build and test when changed
  • gulp docs build docs and examples

Contributing

When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.

NPM DownloadsLast 30 Days