Choicefield Demo | <uif-choicefield>

In order for this demo to work you must first build the library in debug mode.

For non-string ngModel (boolean, array, ...), you should use ng-value instead of the value attribute of your uif-choicefield-option elements.

Basic usage

This markup:

            <uif-choicefield-group ng-model="selectedValue">
                <uif-choicefield-group-title><label class="ms-Label is-required">Pick a value</label></uif-choicefield-group-title>
                <uif-choicefield-option uif-type="radio" value="value1">Text 1</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value2">Text 2</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value3">Text 3</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value4">Text 4</uif-choicefield-option>
            </uif-choicefield-group>

Renders this:
Text 1 Text 2 Text 3 Text 4

selectedValue: {{selectedValue}}

Use ng-change

This markup:

            <uif-choicefield-group ng-model="selectedValue2" ng-change="change()">
                <uif-choicefield-option uif-type="radio" value="value1">Text 1</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value2">Text 2</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value3">Text 3</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value4">Text 4</uif-choicefield-option>
            </uif-choicefield-group>

Renders this:
Text 1 Text 2 Text 3 Text 4

selectedValue2: {{selectedValue2}}
changed: {{changed}}

Checkbox usage

This markup:

            <uif-choicefield-group>
              <uif-choicefield-option uif-type="checkbox" value="value1" 
                ng-model="selectedCheckbox" ng-true-value="'Y'" ng-false-value="'N'">Text 1</uif-choicefield-option>
            </uif-choicefield-group>

Renders this:
Text 1

selectedCheckbox: {{selectedCheckbox}}

Disabled usage

This markup:

            <uif-choicefield-group ng-model="selectedValue" disabled>
                <uif-choicefield-option uif-type="radio" value="value1">Text 1</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value2">Text 2</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value3">Text 3</uif-choicefield-option>
                <uif-choicefield-option uif-type="radio" value="value4">Text 4</uif-choicefield-option>
            </uif-choicefield-group>

Renders this:
Text 1 Text 2 Text 3 Text 4

selectedValue: {{selectedValue}}

ng-disabled usage

This markup:

          <uif-choicefield-group ng-model="selectedValue" ng-disabled="disabled" >
              <uif-choicefield-option uif-type="radio" value="value1">Text 1</uif-choicefield-option>
              <uif-choicefield-option uif-type="radio" value="value2">Text 2</uif-choicefield-option>
              <uif-choicefield-option uif-type="radio" value="value3">Text 3</uif-choicefield-option>
              <uif-choicefield-option uif-type="radio" value="value4">Text 4</uif-choicefield-option>
          </uif-choicefield-group>
          <hr/>
          <uif-choicefield-group ng-model="selectedValue">
              <uif-choicefield-option uif-type="radio" ng-disabled="!disabled" value="value1">Text 1</uif-choicefield-option>
              <uif-choicefield-option uif-type="radio" ng-disabled="disabled" value="value2">Text 2</uif-choicefield-option>
              <uif-choicefield-option uif-type="radio" ng-disabled="!disabled" value="value3">Text 3</uif-choicefield-option>
              <uif-choicefield-option uif-type="radio" ng-disabled="disabled" value="value4">Text 4</uif-choicefield-option>
          </uif-choicefield-group>
          <hr />
          <uif-choicefield-group ng-model="selectedValue">
            <uif-choicefield-option uif-type="checkbox" ng-model="disabled" ng-true-value="true" ng-false-value="false">Disabled</uif-choicefield-option>
          </uif-choicefield-group>

Renders this:
Text 1 Text 2 Text 3 Text 4

Text 1 Text 2 Text 3 Text 4
Disabled

Disabled: {{disabled}} selectedValue: {{selectedValue}}

Dynamically change type

This markup:

    <uif-choicefield-group>
      <uif-choicefield-option uif-type="{{choiceFieldType}}" value="value1">Text 1</uif-choicefield-option>
      <uif-choicefield-option uif-type="{{choiceFieldType}}" value="value2">Text 2</uif-choicefield-option>
      <uif-choicefield-option uif-type="{{choiceFieldType}}" value="value3">Text 3</uif-choicefield-option>
      <uif-choicefield-option uif-type="{{choiceFieldType}}" value="value4">Text 4</uif-choicefield-option>
    </uif-choicefield-group>

Renders this:
Text 1 Text 2 Text 3 Text 4