如何在點擊角度後替換字段？

我有內聯元素HTML代碼：如何在點擊角度後替換字段？

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

點擊編輯後如何更換輸入元素這個元素？

然後按下輸入後回車返回span元素？我試過ng-hide(), ng-show()。但我不知道

來源

2017-01-31 Halama

您可以使用

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

來源

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

如何在點擊角度後替換字段？

回答

相關問題