Question

我正在寻找一种通过隐藏输入进行角度切换的方法。所以我有多个输入表单但是当没有焦点时，我希望它们只显示文本。我正在寻找一种能力，一旦我选择了输入到其他输入的标签，即使它们当前是隐藏的。

有什么建议吗？

Answer 1

使用Angular指令将输入内联编辑器。当页面加载时你将处于显示模式（即显示div将显示，编辑器div将被隐藏），然后点击时，模式切换到编辑模式，可见性反转。

这是一个快速的片段，说明当包含在这样的指令中时，DatePicker控件的外观。使用Angular 1和Bootstrap 3（跟John Papa's Angular Style Guide之后）：

HTML模板（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>

基础指令（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;
            });
        }        
    }
})();

通过Angular中的隐藏输入选项卡

1 个答案: