CODEWITHSUNDEEP
htmlangularjs
Neekoy
Neekoy

Reputation: 2533

Convert field type from div to input on click

I have a div that should be displayed as such, but when you click on the div, I need it to transform into an input field.

This is what I have before that div is clicked:

<div>This is the content.</div>

I wan this to become the following when it's clicked:

<input>This is the content.</input>

And to change back when the user clicks elsewhere.

Is such a thing possible with Angular? I looked into using ng-change as a HTML tag, however I couldn't seem to get it going.

Any help is appreciated.

Upvotes: 3

Views: 5274

Answers (3)

Byron Jones
Byron Jones

Reputation: 745

Nope, but the good news is that you don't need that to happen!

In your controller:

$scope.showInput = false;
$scope.myContent = "This is the content";

Back in your HTML file:

<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />

Now when the button is clicked, the input field will display, but the text will not.

Upvotes: 1

Abdelrahman M. Allam
Abdelrahman M. Allam

Reputation: 922

Try this

<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>

and controller has function like

function cntrl($scope){

    $scope.showInput = false;
    $scope.toggleShowInput = function()
     {
         $scope.showInput = !$scope.showInput;
     }
}

Upvotes: 5

Ivan Gabriele
Ivan Gabriele

Reputation: 6900

If you use Angular, you should write both element and toggle one for the other when the user click :

<!DOCTYPE HTML>
<html ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
  <div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div>
  <input ng-show="inputIsOn" type="text">
</body>
</html>

Upvotes: 1

Related Questions