将标签变形为输入 [英] Morph label into input

问题描述

在Angular中将数据切换到编辑模式"的正确方法是什么，其中< label> 变成了< input type ='text'> 代码>的?我想在运行时创建和销毁DOM元素，而不是先将所有输入呈现为隐藏状态(然后显示它们，并在切换到编辑模式时将它们隐藏为标签).

What is the proper way in Angular to switch data into "edit mode" where <label>'s get morphed into <input type='text'>'s? I'd like to create and destroy the DOM elements at runtime instead of rendering all the inputs first as hidden (where they are then shown, and labels hidden, when switched to edit mode).

推荐答案

与此类似的此jsfiddle

Something along the lines of this jsfiddle should work for you. It is still hiding/showing but the input doesn't need to be in the DOM up front. There are probably a million alternative ways to handle this, but I thought this would at least demonstrate how to get the functionality into a directive.

HTML:

<label inline-edit>Edit me</label>

指令:

'use strict';
var app = angular.module('myApp', []);
app.directive('inlineEdit', function() {
    return{
        restrict: 'A',
        transclude: true,
        template: '<label class="editing" data-ng-transclude></label>',
        controller: ['$scope','$element','$transclude',function($scope, $element, $transclude) {
            $transclude(function(clone) {
                $scope.transcluded_content = clone[0].textContent;
            });
            $element.bind('click', function(){
                $element.hide().after('<input type="text" value="'+$scope.transcluded_content+'" />');

                $element.next().focus().blur(function (){
                    $scope.transcluded_content = $element.next().val();
                    $element.html($scope.transcluded_content);
                    $element.next().hide();
                    $element.show();
                });
            });

        }]
    };
});

这篇关于将标签变形为输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！