chengz/schema-form-uiselect

ui-select implementation for schema-form

ui-select add-on

This ui-select add-on uses as the name implies the ui-select plugin to provide a select dropdown interface. ui-select is used.

Installation

The editor is an add-on to the Bootstrap decorator. To use it, just include schema-form-uiselect.min.js.

Easiest way is to install is with bower, this will also include dependencies:

$ bower install chengz/schema-form-uiselect

You'll need to load a few additional files to use the editor:

Be sure to load this projects files after you load angular schema form

Example

<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-translate/angular-translate.min.js"></script>
<script src='bower_components/angular-ui-select/dist/select.js'></script>
<script src="bower_components/tv4/tv4.js"></script>
<script src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script src="schema-form-strapselect.js"></script>

When you create your module, be sure to depend on this project's module as well.

angular.module('yourModule', ['schemaForm', 'schemaForm-uiselect']);

Usage

The add-on adds a new form type, uiselect, and a new default mapping.

Schema	Default Form type
"type": "string" and "format": "uiselect"	uiselect
"type": "array" and "format": "uiselect"	uimultiselect

Schema Definintion

person_list: {
  title: 'Person List',
  type: 'string',
  format: 'uiselect',
  items: [
    { value: '1', label: 'Person 1' },
    { value: '2', label: 'Person 2' }
  ]
},
persons_list: {
  title: 'Persons List',
  type: 'array',
  format: 'uiselect',
  items: [
    { value: '1', label: 'Person 1' },
    { value: '2', label: 'Person 2' },
    { value: '3', label: 'Person 3' }
  ]
}

Options

The add-on provides only one option to specify a class for select

{
  key: 'person_list',
  placeholder: 'Some Place Holder', //default will translate placeholder.select
  options: {
    uiClass: 'short_select'
  }
}

schema-form-uiselect's Issues

dynamic items

It looks very nice while playing with the example. Is there a way to make the item dynamic? Not from schema definition but from $scope.items or some other variables. In that case, I can load the dropdown options from an Ajax call to the server.

Thanks,

Steve

Separate HTML templates from main JS

Hi,

Building on the strengths of ui-select, schema-form-uiselect is a very powerful and versatile tool. With this versatility comes the need to modify the HTML templates provided by default. When one modifies the templates to suite their project, the original templates are no longer necessary to be bundled within the component .js-files. I would like to suggest an enhancement where the template cache package is separated from the actual functionality into a separate .js-file much like it is done by the schema-form itself along with many other projects like angular-strap, etc.

How to set group-by option?

multiple select doesn't work if there is no default value

When you select items from multiple select, the selected values are not in the model. This issue only happens when there is no default value for the multiple select. If there is one or more default values selected already, changes will be shown up in the model.

Question about toggleModel and so on

I have decided to implement ui-select as well into angular-schema-form-dynamic-select, as I have noticed that they don't conflict and share many settings. There is no reason not to, really.

So I am trying to steal your code, and I am having some issues understanding some design choices, it is about the form.select_models, insideModel and the toggle-model-directive.

I don't understand why you use that, and not use the ng-model of the ui-select to $$value$$ directly?