javascript - 通过单击 AngularJs 中的按钮用输入文本框替换标签，反之亦然

Question

我有一个带有标签和编辑按钮的表单，当我点击按钮时，标签应该被转换为文本框，标签数据作为文本，当我保存它时，文本框应该再次被转换为标签。

我们如何在 AngularJs 中处理？谁能提供一些这方面的信息？

html:

<form ng-app="testApp" ng-controller="testController">
    <label class="keyColumn">name: </label>
    <label class="valueCoulmn">stackover flow </label>
    <button ng-click="editLabel">Edit</button>
</form>

Controller .js:

(function() {
  angular
    .module("testApp", [])
    .controller('testController', function($scope) {
      $scope.editLabel = function() {}
    });
})();

Answer 1

您可以使用 ngshow 显示/隐藏标签和输入和 ngHide .
基本上是 <label>应该包含一个显示数据的表达式和相应的 <input>应包含 ngModel指向相同的数据。然后使用按钮在显示模式之间简单地切换:

angular.module('test', []).controller('testCtrl', function($scope) {
  $scope.editMode = false;
  $scope.name = "John Doe";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <form>
    <label ng-hide="editMode">{{name}}</label>
    <input ng-show="editMode" ng-model="name">
    <button ng-click="editMode=true">Edit</button>
    <button ng-click="editMode=false">Save</button>
  </form>
</div>

如果您认为您的表格很重并且不想同时拥有 <label>和 <input>同时在 DOM 中使用 ngIf相反。