CODEWITHSUNDEEP
angularjsjsonformsselectangular-schema-form
Glamdring
Glamdring

Reputation: 69

Specify Angular Schema Form Select drop down options using scope

I've been looking at using Angular Schema Form to define all my forms for my project but one thing that stood out to me massively is that when we define a select/drop-down element, the values have to be specified then and there in the JSON. This doesn't strike me as very flexible as I want these values to be retrieved from my Angular controller/factory as they are currently available on the scope.

I've done quite a bit of searching on how to get round this but haven't found a definitive solution or anything that worked for me so I decided to try to extend the Select myself and add a mapping to the schemaFormDecoratorsProvider.

I have followed the documentation for Extending Schema Form, and now have an HTML snippet which defines my Select control and this is being rendered when I define it in my JSON schema. What I want to be able to do is to specify the ng-options attribute either in part as a whole via the JSON schema. I have tried to do this but nothing seems to result in the select options being rendered.

Here is part of my select control:

<select ng-model="$$value$$"
    ng-model-options="form.ngModelOptions"
    sf-changed="form"
    schema-validate="form"
    ng-options="item.value as item.name for item in form.titleMap"
    ng-disabled="form.readonly">
</select>

Where ng-options is defined, I want to be able to either specify titleMap in my JSON and it be resolved to an object on my scope or I can pass the name of the collection in my JSON and then pass that in where form.titleMap currently sits.

Anybody had any experience doing this? To me is seems like a fairly reasonable requirement but can't find much help on the web about it.

Many thanks.

Upvotes: 3

Views: 3818

Answers (1)

Anthropic
Anthropic

Reputation: 711

There are add-ons designed to support dynamic data selection, the library has no preference and leaves it up to the developer to select the most appropriate for their needs, however I built the Material Design decorator to include the capabilities of angular-schema-form-external-options in the decorator so the add-on is not needed. The bootstrap decorator does not have this capability at this stage.

The angular-schema-form-external-options library is basic but covers most requirements for simple dynamic drop down data population

The angular-schema-form-dynamic-select is a more robust and feature full option with a variety of configurable options.

Upvotes: 2

Related Questions