how can i show inputfields only on buttonclick with angularJS?

Question

i need to hide the inputfields of editing until the button edit is clicked then i want to show the input fields. it has to toggle on click to show the inputfield.

I also wanted to change text of edit to close fields if the inputs are showing.

here is my code

<div class="personInfo">
          <h3>name <input type="text" ng-model="user.name" ng-show="edit"></h3>
          <h3>email: <input type="text" ng-model="user.email" ng-show="edit"></h3>
          <h3>birthday: <input type="text" ng-model="user.birthday" ng-show="edit"></h3>
          <h3>password: <input type="text" ng-model="user.password" placeholder="hidden" ng-show="edit"></h3>
          <button type="submit" class="save-button">Save</button>
          <button ng-click="edit">edit</button>
        </div>

ps: i tried to put edit in the ng-click to show only when edit is clicked but it is not working

ng-click="edit = true"

Fissio
– Fissio

2017-01-26 12:50:26 +00:00
Commented Jan 26, 2017 at 12:50 — Fissio
– Fissio, Commented Jan 26, 2017 at 12:50

Mikko Viitala · Accepted Answer · 2017-01-26 12:51:38Z

2

<button ng-click="edit = !edit">{{ edit ? 'close' : 'edit' }}</button>

answered Jan 26, 2017 at 12:51

Mikko Viitala

8,3944 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Baig · Accepted Answer · 2017-01-26 12:51:48Z

You can try it like

<div class="personInfo">
  <h3>name <input type="text" ng-model="user.name" ng-show="IsEditMode"></h3>
  <h3>email: <input type="text" ng-model="user.email" ng-show="IsEditMode"></h3>
  <h3>birthday: <input type="text" ng-model="user.birthday" ng-show="IsEditMode"></h3>
  <h3>password: <input type="text" ng-model="user.password" placeholder="hidden" ng-show="IsEditMode"></h3>
  <button type="submit" class="save-button">Save</button>
  <button ng-click="edit" ng-click="setMode(IsEditMode)">edit</button>
</div>

In your controller, create a property like

$scope.IsEditMode = false;

and then create an ng-click for your button like

//toggle function
$scope.setMode = function(mode)
{
   if(mode == true)
        $scope.IsEditMode = false;
   else
        $scope.IsEditMode = true;
}

Edrosos · Accepted Answer · 2017-01-26 12:53:10Z

1

You need to attach a function to your ng-click call, like so: ng-click="enable()". The function enable() can change the edit variable to true, and the fields will show.

Alternatively, if you don't want to use a function, you can do it directly using: ng-click="edit = !edit"

answered Jan 26, 2017 at 12:53

Edrosos

701 silver badge7 bronze badges

Collectives™ on Stack Overflow

how can i show inputfields only on buttonclick with angularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related