角をクリックした後にフィールドのテキストを置き換えるにはどうすればいいですか？

私は、インライン要素を持つHTMLコードを持っている：角をクリックした後にフィールドのテキストを置き換えるにはどうすればいいですか？

<span class="title" ng-click="update()">Rock</span>

編集のためにクリックした後、入力要素で、この要素を交換する方法は？

プッシュ後、入力リターンバックスパン要素に入力しますか？

私はディレクティブng-hide(), ng-show()で試しました。しかし、私はあなたがtruthyことができるものを参照したいと思うでしょういずれにせよ

<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>

のいずれかを使用することができます

出典

2017-01-31 Halama

を疑問に思います。たとえば、あなたのコントローラでは、あなたの関数内でこのような何かを持っているでしょう

/*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; 
}

出典

2017-01-31 22:55:10 maus

、あなたは何をする必要がどのような状態を格納する変数を設定されています。

<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

出典

2017-01-31 22:56:27

角をクリックした後にフィールドのテキストを置き換えるにはどうすればいいですか？

答えて

関連する問題