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.
<span cam-widget-inline-field class="set-value" type="text" value="name" placeholder="Please enter a name here"> {{name}} </span>
<span cam-widget-inline-field class="set-value" type="datetime" value="date"> {{ date | camDate }} </span>
<span cam-widget-inline-field class="set-value" type="option" options="options" value="selectedOption"> {{ selectedOption }} </span>
<span cam-widget-inline-field class="set-value" type="option" options="keyOptions" value="selectedKeyOption"> {{ selectedKeyOption.key }} : {{ selectedKeyOption.value }} </span>
<span cam-widget-inline-field class="set-value" type="option" options="options" allow-non-options="true" value="selectedOption2"> {{ selectedOption2 }} </span>
<span cam-widget-inline-field class="set-value" type="text" value="dateText" flexible="true"> {{ dateText }} </span>
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"; }]);