3

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.

Glamdring
  • 69
  • 2
  • 7
  • have you tried passing an array to the `tileMap` property of the default select element? it should support dynamic assignment... The documentation suggests that an object could be supplied: "A titleMap can be specified as either an object (same as in JSON Form), where the propery is the value and the value of that property is the name, or as a list of name-value objects. The latter is used internally and is the recomended format to use. Note that when defining a titleMap as an object the value is restricted to strings since property names of objects always is a string." – Claies Jan 12 '16 at 13:46
  • I've just read that part of the documentation but I still don't understand how I reference something that exists on the Angular Scope. The examples there are defined right there as JSON. Are you saying I should be able to define my titleMap as `"titleMap": agenciesArray` Or something? – Glamdring Jan 12 '16 at 14:44
  • the JSON is just a plain object. you should be able to use `titlemap : $scope.myTitlemapObject` in the creation of the form. It seems that you can also leverage interpolation with `{{ }}` in the string values, but I haven't had a chance to experiment with how that would work. – Claies Jan 12 '16 at 14:59
  • Cool thanks, I'll have a play around, and post my findings. – Glamdring Jan 12 '16 at 15:12
  • OK I discovered what my problem was. I had tried referencing scope variables originally but it just wasn't working for me, the reason being that my json existed in a separate file that was being served up from another location asynchronously. So that was never going to work. I moved it into my controller and "hey presto" I got it working. Only thing is with this approach is my controller doesn't half look messy with all that json inside it. Really need to be able to extract that somewhere. – Glamdring Jan 14 '16 at 09:10
  • well, if you know the structure of the form data, you could change the data in your controller. When you read the JSON into a property on `$scope`, it is just a plain data structure. You could read the information from the server with `titlemap` as an empty array, then use an assignment to the data, something like `$scope.schema.someDropdown.titlemap = $scope.myTitleMap`; there is even a built in event to broadcast changes to the view: `$scope.$broadcast('schemaFormRedraw')`. – Claies Jan 14 '16 at 14:19

1 Answers1

2

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.

Anthropic
  • 681
  • 1
  • 11
  • 29
  • I'm using material design framework and not bootstrap. So the second option is better in that case or can the first option be used without bootstrap and instead using material design framework? – Scott B Mar 13 '19 at 14:59