How to show the hide element in angular js?

Question

I am trying to display the "[6] Peter who is 95 years old" value in text box which is hide.But It should show when the <button ng-click="show_id(friend.id)">get my id</button> is clicked. The name should be in name ng-model="name", age in ng-model="age".

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example42-production</title>



  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>


<script>
angular.module("my_app",[])
.controller("my_ctr",function($scope){

    $scope.show_id=function(index){
        alert(index);
    }
})
</script>
</head>
<body ng-app="my_app" ng-controller="my_ctr">
    <div ng-init="friends = [
    {id:1, name:'John', age:25, gender:'boy'},
    {id:2, name:'Jessie', age:30, gender:'girl'},
    {id:3, name:'Johanna', age:28, gender:'girl'},
    {id:4, name:'Joy', age:15, gender:'girl'},
    {id:5, name:'Mary', age:28, gender:'girl'},
    {id:6, name:'Peter', age:95, gender:'boy'},
    {id:7, name:'Sebastian', age:50, gender:'boy'},
  ]">
    I have {{friends.length}} friends. They are:

    <ul>
      <li  ng-repeat="friend in friends.slice().reverse() ">
        [{{friend.id}}] {{friend.name}} who is {{friend.age}} years old.
        <input type="text" ng-model="name" ng-hide="true">
          <input type="text" ng-model="age" ng-hide="true">
          <input type="text" ng-model="gender" ng-hide="true">
        <button ng-click="show_id(friend.id)">get my id</button>       
      </li>

    </ul>
  </div>
</body>
</html>

but for this code is not working.

now this data is available in text box now I want to get the changed data .How can I do that? — vaibhav kulkarni
– vaibhav kulkarni, Commented Sep 19, 2014 at 6:35

Josep · Accepted Answer · 2014-09-19 05:28:51Z

2

Try this:

  <li  ng-repeat="friend in friends.slice().reverse() ">
    [{{friend.id}}] {{friend.name}} who is {{friend.age}} years old.
    <input type="text" ng-model="friend.name" ng-show="showItem">
      <input type="text" ng-model="friend.age" ng-show="showItem">
      <input type="text" ng-model="friend.gender" ng-show="showItem">
    <button ng-click="showItem=true">get my id</button>       
  </li>

answered Sep 19, 2014 at 5:28

Josep

13.1k2 gold badges44 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

How to show the hide element in angular js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related