Tab Through Hidden Inputs in Angular

Question

I'm looking for a way in angular to tab through hidden inputs. So I have multiple input forms but when not on focus I want them to just display the text. I'm looking for the ability to once I've selected an input to tab through the other inputs even though they are currently hidden.

Any suggestions?

Answer 1

Use Angular directives to make your inputs into inline editors. When the page loads you'll be in display mode (ie the display div will be shown and the editor div will be hidden), then on clicking, the mode switches to Edit mode and the visibility is reversed.

Here's a quick snippet of what a DatePicker control would look like when wrapped in such a directive. Using Angular 1 and Bootstrap 3 (follows John Papa's Angular Style Guide ):

HTML Template (inlineDatePicker.html):

<div class="inline-edit">
    <div ng-if="!vm.inEditMode" data-ng-click="vm.enableEditMode()">
        <input type="hidden" data-ng-model="vm.dateModel" data-ng-required="vm.dateRequired" /><span>{{vm.dateModel}}</span> <span class="glyphicon glyphicon-calendar"></span>
    </div>
    <div ng-if="vm.inEditMode">
        <div class="well well-sm" style="position: absolute; z-index: 10">
            <datepicker data-ng-model="vm.dateModel" data-show-weeks="false"></datepicker>
            <button type="button" class="btn btn-sm btn-info" ng-click="vm.today()">Today</button>
            <button type="button" class="btn btn-sm btn-danger" ng-click="vm.cancel()">Cancel</button>
        </div>
    </div>
</div>

And the underlying directive (inlineDatePicker.directive.js):

(function () {
    'use strict';

    angular.module('myApp.inlineEdit')
    .directive('inlineDatePicker', inlineDatePicker);

    function inlineDatePicker() {
        'use strict';
        inlineDatePickerController.$inject = ['$scope', '$timeout'];

        return {
            restrict: 'A',
            replace: true,
            transclude: false,
            templateUrl: '/App/inlineEdit/date/inlineDatePicker.html',
            scope: {
                dateModel: '=',
                dateRequired: '@',
                dateChanged: '&'
            },
            controller: inlineDatePickerController,
            controllerAs: 'vm',
        };

        function inlineDatePickerController($scope, $timeout) {
            /* jshint validthis:true */
            var vm = this;
            vm.inEditMode = false;
            vm.dateModel = $scope.dateModel;
            vm.dateRequired = $scope.$eval($scope.dateRequired);
            vm.enableEditMode = enableEditMode;
            vm.cancel = cancel;
            vm.today = today;

            function enableEditMode() {
                vm.inEditMode = true;
            }

            function cancel() {
                vm.inEditMode = false;
            }

            function today() {
                vm.dateModel = new Date();
            }

            $scope.$watch('vm.dateModel', function (curr, orig) {
                $scope.dateModel = vm.dateModel;
                if (curr != orig && vm.inEditMode) {
                    $timeout($scope.dateChanged, 0);
                }
                vm.inEditMode = false;
            });

            $scope.$watch('dateModel', function () {
                vm.dateModel = $scope.dateModel;
            });
        }        
    }
})();