https://github.com/forms-angular/fng-ui-select

Plugin to use the Angular UI ui-select control in forms-angular
https://github.com/forms-angular/fng-ui-select

Last synced: 10 days ago
JSON representation

Plugin to use the Angular UI ui-select control in forms-angular

• Host: GitHub
• URL: https://github.com/forms-angular/fng-ui-select
• Owner: forms-angular
• License: mit
• Created: 2014-11-28T16:57:13.000Z (about 10 years ago)
• Default Branch: main
• Last Pushed: 2024-03-28T23:46:00.000Z (9 months ago)
• Last Synced: 2024-04-14T04:46:03.312Z (9 months ago)
• Language: JavaScript
• Size: 3.35 MB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        
# fng-ui-select

Plugin for forms-angular that adds ui-select (https://github.com/angular-ui/ui-select) support.

## Usage

    npm install fng-ui-select

To get all the dependencies at the top level of your node_modules run

    npm dedupe

Add the following lines to your index.html (or equivalent) file.

    

    

    

In your Mongoose schemas you can set up fields like this:

    colour: {type: String, enum: ['Blue', 'Brown', 'Green', 'Hazel'], form: {directive: 'fng-ui-select'}}

    lookup: {type: Schema.Types.ObjectId, ref: 'anotherModel', form: {directive: 'fng-ui-select'}},

Options can be added to a fngUiSelect object within the form object as follows:

* _theme_ defaults to _select2_.  Other options are _bootstrap_ and _selectize_.  Bootstrap required Bootstrap 3 and will fall

back to _select2_.

* _fngAjax_  creates a control that queries the back end after each keystroke (with 100ms of debounce) for matches.

    * Set to true to search the whole of the _ref_ collection (honouring any collection level filters)

    * Assign a string starting with '/' to do your own query on the backend.  The search string will be in _req.query.q_ and the current value of the existing record in _req.query.e_.  The $index will be in _req.query.i_.

    * Use a mongo search object (converted to JSON and escaped) to apply a filter to the default search over _ref_ collection.  For example to search 

only amongst records where the value of *accountSuspended* is false you might do

```

    customer: {

      type: Schema.Types.ObjectId

      ref: 'customer', 

      form: {

        directive: 'fng-ui-select',

        fngUiSelect: {

          fngAjax: escape(JSON.stringify( {accountSuspended:false} ))

        } 

      }

    }

```

    

The _text_ property of the result set will be used to populate the options, unless the _additional_ option is used, in which 

case anything in the _additional_ property will be concatenated to the text.  This will be empty unless you are [overriding the

default search behaviour](http://forms-angular.org/#/forms#search).

 

* _forceMultiple_ when set to true on an array schema element will create multiple controls, rather than a single control

accepting multiple selections

* _deriveOptions_ a name of a function on the form scope that returns a property name on the scope that contains the options.  If these options will be in the form of objects which include an id and a text property you create a property _isObjects_ 

on the specified form scope property with the value _true_. 

* _additional_ appends the contents of the _additional_ property (if any) in the result set from the lookup function

* _noconvert_ inhibits the options being passed to forms-angular, so no automatic lookups are performed (sometimes useful when 

using fng-ui-select in a directive on a forms-angular form. 

## Tests

e2e tests require the forms-angular website (https://github.com/forms-angular/website)