У меня есть HTML-код с инлайн элемента:Как заменить текст на поле после нажатия на угловое?
<span class="title" ng-click="update()">Rock</span>
Как заменить этот элемент на элемент ввода после щелчка для редактирования?
И после этого после ввода ввода на входе элемент возврата назад?
Я пробовал с директивами ng-hide(), ng-show(). Но мне интересно
Вы можете использовать либо
<span class="title" ng-hide="isEdited" ng-click="update()">Rock</span><span class="title" ng-show="!isEdited" ng-click="update()">Rock</span><span class="title" ng-if="!isEdited" ng-click="update()">Rock</span>В любом случае вы хотите, чтобы ссылаться на то, что может быть truthy. Например, в вашем контроллере вы бы что-то подобное в вашей функции
/*the init function just makes sure that everything is setup
and nothing caries over from any local storage or anything
else you may be using*/
init();
init function(){
$scope.isEdited = false;
}
$scope.update = function(){
$scope.isEdited = true;
}
Что вам нужно сделать, это установить переменную, содержащую состояние;
<html>
<body ng-app="app">
<div ng-controller="mainController as $ctrl">
<span ng-if="!$ctrl.isInEditMode" class="title" ng-click="$ctrl.update()" ng-bind="$ctrl.spanText"></span>
<div ng-if="$ctrl.isInEditMode">
<input type="text" placeholder="Value for rock" ng-model="$ctrl.spanText" />
<button ng-click="$ctrl.update()">Done</button>
</div>
</body>
</html>
angular.module('app', [])
.controller('mainController', function($scope) {
this.isInEditMode = false;
this.spanText = 'Rock';
this.update = (function() {
this.isInEditMode = !this.isInEditMode;
}).bind(this);
});
Я подготовил Codepen, который показывает возможное решение: http://codepen.io/stefferd/pen/QdQrrv