Add Support for ButtonBar

[gizmoboy]

Add support for a buttonbar field type (preferably, AngularStrap's button bar option (http://mgcrea.github.io/angular-strap/##buttons).

The buttonbar type should permit single-select (as shown in the "Radios" section of the demo linked to) as well as multi-select (as shown in the "Checkboxes" section of the demo), and also on/off toggles (as shown in the Toggle section, which is probably just a variation of multi-select with a single option).

Options for the buttonbar type would be similar to the "options" list for the existing Radio form field, with name and value, but an additional option called "selected" which is a boolean indicating whether the option is currently selected.

In addition, there should be a selectStyle option with possible values of "single" and "multiple" which should drive the Radios or Checkboxes style implemention mentioned above.

If selectStyle the value of this field type should be the collection of name/value/selected objects for all items in the options property.

[kentcdodds]

How important is the actual implementation you've described. Because what you've described may not necessarily be the exact best solution for what you're trying to accomplish based on what the library can do currently. Here's what I expect you need (implementation details aside):

• A way to have a button bar with an option of single and multi-select
• The value to indicate selection

Is there more than this that you actually need?

Here's my expected implementation:

I'll definitely need to create a directive to handle this. Unfortunately a simple template wont be able to handle this well. Here's the interface for a buttonbar.

{
    "key": "triedEmber",
    "type": "buttonbar",
    "selectStyle": "SEE_BELOW",
    "label": "Have you tried EmberJs yet?",
    "default": "SEE_BELOW",
    "options": [
        {
            "name": "Yes, and I love it!",
            "value": "yesyes"
        },
        {
            "name": "Yes, but I'm not a fan...",
            "value": "yesno"
        },
        {
            "name": "Nope",
            "value": "no"
        }
    ]
}

The selectStyle could be either 'single' or 'multiple'. This would determine what would be set as the value: a boolean for multiple with one options, an object for multiple with more than one option (where the keys are the property names and the value is true/false), and a single value for a single (which would be the value property of the option selected).

The default would simply be the initial value and the directive would handle converting that into what the view needs. If the result object provided already has a value, this default will be ignored.

I think what I've described (including the implementation) is actually pretty well what you described, though we're not going to bring in a dependency on AngularStrap (partially because I'm not a fan of that particular library, and partially because I want to keep our dependencies down). Let me know if this isn't what you're looking for asap because I think I'm going to start working on this now...

[kentcdodds]

Actually, I'm going to denote the type as 'buttongroup' as this is what bootstrap calls it.

[kentcdodds]

@gizmoboy, as this is going to take a little more time than expected and I don't have a use case for it myself, I've upped the bounty to where I think I would personally be sufficiently motivated to add this feature. Let me know if that works for you and I'll get into implementing it.

[gizmoboy]

Yes, that approach works for me (though I'd love to see a sample implementation that allows us to bring in our UI framework of choice on top of the base bootstrap implementation (we've been migrating from Angular-UI to Angustrap because it seems better supported).