Inline Field

Description

The inline edit field provides the possibility to edit values directly where they are displayed. The user can click on the value, change it and directly apply the change to the scope variable. The inline edit field can be used for text input, date inputs and selections with multiple options.

Usage

Options

@ type
One of text, option, date, time or datetime
= value
The name of the scope variable you are editing with this inline edit field
& validate
An optional validator function which is used to set the field valid and invalid
& change
An optional function which is called whenever the scope value is changed (the user applies the change)
& onStartEditing
An optional function which is called whenever the user starts editing the value (clicks on the field)
& onCancelEditing
An optional function which is called whenever the user cancels the edit operation.
@ placeholder
A text which is displayed in the empty text edit field.
= options
An array of either Strings or key-value objects which is used for the option input type.
@ allow-non-options
Only relevant in combination with options. Allows the user to enter values which are not part of the options array. In this case, the returned value will be the entered string. Defaults to false.
@ flexible
If set to true, the user can switch between a datetime and a text input field.

Examples

Text Edit

<span cam-widget-inline-field
      class="set-value"
      type="text"
      value="name"
      placeholder="Please enter a name here">
  {{name}}
</span>
{{name}}

Datepicker

<span cam-widget-inline-field
      class="set-value"
      type="datetime"
      value="date">
  {{ date | camDate }}
</span>
{{ date | camDate }}

Options

<span cam-widget-inline-field
      class="set-value"
      type="option"
      options="options"
      value="selectedOption">
  {{ selectedOption }}
</span>
{{ selectedOption }}

Options - Key-Value

<span cam-widget-inline-field
      class="set-value"
      type="option"
      options="keyOptions"
      value="selectedKeyOption">
  {{ selectedKeyOption.key }} : {{ selectedKeyOption.value }}
</span>
{{ selectedKeyOption.key }} : {{ selectedKeyOption.value }}

Options with allow Non Options

<span cam-widget-inline-field
      class="set-value"
      type="option"
      options="options"
      allow-non-options="true"
      value="selectedOption2">
  {{ selectedOption2 }}
</span>
{{ selectedOption2 }}

Flexible: Text/Date-Combo

<span cam-widget-inline-field
      class="set-value"
      type="text"
      value="dateText"
      flexible="true">
  {{ dateText }}
</span>
{{ dateText }}

Scope Variables

Here are the variable settings which are used for the examples above:
testModule.controller('testController', ['$scope', function($scope) {
  $scope.name = 'Mr. Prosciutto';
  $scope.date = '2015-01-22T15:11:59';
  $scope.options = ['foobar', '1', '2', '3'];
  $scope.selectedOption = 'foobar';
  $scope.keyOptions = [{key: 'foobar', value: 'Barfoo'}, {key: '1', value: 'One'}, {key: '2', value: 'Two'}, {key: '3', value: 'Three'}];
  $scope.selectedKeyOption = {key: 'foobar', value: 'Barfoo'};
  $scope.dateText = "Foobar";
}]);