AngledJsのボタンをクリックすると、ラベルを入力テキストボックスに置き換えます。

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>

あなたのフォームは非常に重いと思いと同時に、DOMで<label>と<input>の両方を持ってしたくない場合は、代わりにngIfを使用してください。

Answer 2

labelタグにcontenteditable属性を使用できます。

チェックこのデモ：

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

これが役に立ちます。