Question

我有一个带有标签和按钮Edit的表单，当我点击按钮时，Label应转换为文本框，标签数据为文本，当我保存时，textbox应再次转换为标签。

我们如何在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。然后使用按钮只需在显示模式之间切换：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您认为自己的表单非常繁重，并且不希望同时在DOM中同时使用<label>和<input>，请改用ngIf。

Answer 2

您可以在contenteditable代码中使用label属性。

查看此演示：

(function() {
  "use strict";

  var app = angular.module("app", []);
  app.controller("Controller", ["$scope",
    function($scope) {
      $scope.buttonText = "Edit";

      $scope.editSave = function(evt) {
        var label = evt.target.previousElementSibling; // Get the label tag from your button.
        var labelData = label.innerText; // Get the label text.

        alert(labelData);

        if ($scope.buttonText == "Edit") { // If the current button's text is "Edit"...
          label.setAttribute("contenteditable", true); // Set contenteditable=true to your label.

          /* To make focusable your editable label. */
          label.setAttribute("target", 0);
          label.focus(); // Set the focus in your label.
          $scope.buttonText = "Save"; // Change the button's text to "Save".
        } else {
          label.removeAttribute("contenteditable");
          label.removeAttribute("target");
          $scope.buttonText = "Edit";
        }
      };
    }
  ]);
})();

label {
  padding: 2px;
}
label[contenteditable=true] {
  border: solid 1px #CCCCCC;
  padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="Controller">
    <form id="form">
      <div>
        <label>Label</label>
        <button data-ng-bind="buttonText" data-ng-click="editSave($event)" type="button"></button>
      </div>
    </form>
  </div>
</div>

此演示适用于您的上次更新：

(function() {
  angular
    .module("testApp", [])
    .controller('testController', function($scope) {
      $scope.buttonText = "Edit";

      $scope.editLabel = function(evt) {
        var label = evt.target.previousElementSibling; // Get the label tag from your button.
        var labelData = label.innerText; // Get the label text.

        alert(labelData);

        if ($scope.buttonText == "Edit") { // If the current button's text is "Edit"...
          label.setAttribute("contenteditable", true); // Set contenteditable=true to your label.

          /* To make focusable your editable label. */
          label.setAttribute("target", 0);
          label.focus(); // Set the focus in your label.
          $scope.buttonText = "Save"; // Change the button's text to "Save".
        } else {
          label.removeAttribute("contenteditable");
          label.removeAttribute("target");
          $scope.buttonText = "Edit";
        }
      };
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="testApp" ng-controller="testController">
  <label class="keyColumn">name:</label>
  <label class="valueCoulmn">stackover flow</label>
  <button ng-bind="buttonText" ng-click="editLabel($event)"></button>
</form>

希望这有帮助。

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

2 个答案: