angularjs实现双击span标签，将span标签变成input标签？

rand

2k32117133

发布于
2015-09-09

更新于
2015-09-09

页面中有多个span标签，每个span标签都绑定了一个双击事件，如何在双击事件中实现，将被双颊的span标签变成input标签，同时span标签中的值变成input标签的value？

angularjs

阅读 9.9k

4 个回答

dreamapplehappy

✓ 已被采纳

1.借助html5的新特性contenteditable和Angular的指令还是很容易做到的。
2.可以看这个demo
3.具体代码如下：
app.js

    (function(){
    angular.module('MyApp', [])
        .controller('MyController', MyController)
        .directive('contentEditable', contentEditable);

    MyController.$inject = [];
    contentEditable.$inject = [];

    function MyController(){
        var vm = this;
        vm.test = 'Hello World!';
    }
    function contentEditable(){
        return {
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                element.html(scope.vm.test);
                attrs.$set('contenteditable', false);

                ctrl.render = function (value) {
                    element.html(value);
                };

                ctrl.$setViewValue(element.html());

                element.bind('dblclick', function () {
                    if (!attrs.contenteditable) {
                        attrs.$set('contenteditable', true);
                        element[0].focus();
                    }
                });

                element.bind('blur', function () {
                    attrs.$set('contenteditable', false);

                    scope.$apply(function () {
                        ctrl.$setViewValue(element.html());
                    });
                });

                element.bind('keydown', function (event) {
                    var esc_key = event.which === 27,
                        enter_key = event.which === 13;

                    if (esc_key || enter_key) {
                        event.preventDefault();
                        element[0].blur();
                    }
                });
            }
        };
    }
})();

index.html

    <body ng-app="MyApp">
        <div class="test-container" ng-controller="MyController as vm">
            <div class="test" content-editable ng-model="vm.test"></div>
            <hr/>
            <div class="test" ng-bind="vm.test"></div>
        </div>
    </body>

杨佰

2.8k41223

发布于
2015-09-09

ng-dbclick质量里面去处理就可以了

ruixie

40125

发布于
2015-09-09

更新于
2015-09-09

一般来说都是写两个，一个隐藏一个显示就好：

<span ng-show="!tag.edit" ng-dblclick="tag.edit = true" ng-bing="tag.name"></span>
<input type="text" ng-show="tag.edit" ng-model="tag.name" />

虽然随便更改需求是不好的……但是我猜你想要的其实只是双击之前的input只读且无边框，双击之后它从只读变成可编辑、并带上边框……
像前面几位说的那样加双击响应，并在回调函数中改readonly和style吧。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进