There are multiple span tags in the page, and each span tag is bound to a double-click event. How to implement it in the double-click event, so that the span tag that is double-cheeked becomes an input tag, and the value in the span tag becomes The value of the input tag?
迷茫2017-05-15 16:57:25
1. It’s easy to do with the help of html5的新特性contenteditable and Angular’s instructions.
2. You can watch this demo
3. The specific code is as follows:
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">
<p class="test-container" ng-controller="MyController as vm">
<p class="test" content-editable ng-model="vm.test"></p>
<hr/>
<p class="test" ng-bind="vm.test"></p>
</p>
</body>
習慣沉默2017-05-15 16:57:25
Generally speaking, write two, one to hide and one to show:
<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" />
高洛峰2017-05-15 16:57:25
Although it is not good to change the requirements casually...but I guess what you want is actually that the input before double-clicking is read-only and has no borders. After double-clicking, it changes from read-only to editable with borders...
Like before Add double-click response as several people said, and change readonly and style in the callback function.