Question

我有内联元素的HTML代码：

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

点击进行编辑后如何在input元素上替换此元素？

然后在输入后输入返回span元素？

我尝试使用指令ng-hide(), ng-show()。但我想知道

Answer 1

您可以使用其中之一

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

在任何情况下，你都会想要引用一些可能真实的东西。例如，在您的控制器中，您将在函数

中具有类似的功能

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

Answer 2

您需要做的是设置一个包含状态的变量;

<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

单击Angular后如何替换字段上的文本？

2 个答案: