- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Il y a plusieurs balises span dans la page, et chaque balise span est liée à un événement de double-clic. Comment l'implémenter dans l'événement de double-clic, de sorte que la balise span à double joue devienne une balise d'entrée. , et la valeur dans la balise span devient La valeur de la balise d'entrée ?
迷茫2017-05-15 16:57:25
1. C'est facile de le faire avec l'aide des nouvelles fonctionnalités de html5 contenteditable et des instructions d'Angular.
2. Vous pouvez regarder cette démo
3 Le code spécifique est le suivant :
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
De manière générale, écrivez-en deux, un pour cacher et un pour montrer :
<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
Bien qu'il ne soit pas bon de modifier les exigences avec désinvolture... mais je suppose que ce que vous voulez, c'est en fait que l'entrée avant le double-clic soit en lecture seule et n'ait pas de bordures. Après le double-clic, elle change de lecture. uniquement modifiable avec des bordures...
Ajoutez une réponse en double-clic comme les précédents l'ont dit, et modifiez la lecture seule et le style dans la fonction de rappel.