Replacing label with text input field and vice versa by clicking a button in AngularJs
I have a form with a label and an Edit button, when I click the Label button, the drawer should be converted to a textbox with the label data as text, and when I save it, the textbox should be converted again as a label.
how can we get closer to AngularJs? Can anyone provide some information on this?
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() {}
});
})();
source to share
You can just show / hide shortcuts and inputs with ngshow
and ngHide
.
Basically <label>
it must contain expression, displaying data and corresponding <input>
must contain ngModel
, indicating the same data. Then use the buttons to easily switch between display modes:
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>
If you think that your form is very heavy, and you do not want to have at the same time <label>
and <input>
in the DOM, instead use ngIf
.
source to share
You can use the attribute contenteditable
in the tag label
.
Check out this demo:
(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 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 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>
This demo works with your latest update:
(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 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 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>
Hope it helps.
source to share