ng-hide & ng-show in AngularJS

Question

Using AngularJS I want to show and hide the data related with particular id in the toggle way.

My JSON Data format is like:

  $scope.things = [{
        id: 1,
        data: 'One',
        shown: true
    }, {
        id: 2,
        data: 'Two',
        shown: false
    }, {
        id: 3,
        data: 'Three',
        shown: true
    },  ];

What I want is when click on id-1 It will show text One and Hide the others, when click on id-2 will show text Two and hide others and so on.

Here is the fiddle what I tried : jsfiddle : Demo Link

simon · Accepted Answer · 2014-12-03 05:55:41Z

1

i updated your code

$scope.flipMode = function (id) {
    $scope.things.forEach(function (thing) {
                 if(id == thing.id){
                     thing.shown = true;
                 }
                 else{
                     thing.shown = false;
                 }
    })
};


<a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>

here is the working fiddle

answered Dec 3, 2014 at 5:55

simon

1,48510 silver badges20 bronze badges

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

2 Comments

Vaibhav Jain Over a year ago

Thanks. Is it any way to display the related data just below that id. ?

simon Over a year ago

<div ng-repeat="thing in things"> <a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a> <div>{{thing.data}}</div> </div>

Lekhnath · Accepted Answer · 2014-12-03 06:00:01Z

0

It should work

$scope.flipMode = function (id) {
        $scope.things.forEach(function (thing) {
                     if(thing.id === id) {
                         thing.shown = true;
                         return;
                     }

                     thing.shown = false;
        })
    };

<div ng-repeat="thing in things">

   <a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>
</div>

answered Dec 3, 2014 at 6:00

Lekhnath

4,6456 gold badges39 silver badges66 bronze badges

Comments

user12121234 · Accepted Answer · 2014-12-03 06:00:44Z

0

Forked working solution: http://jsfiddle.net/nypmmkrh/

Change your scope function:

$scope.flipMode = function (id) {
  $scope.things.forEach(function(thing) {
    if(thing.id == id) {
      thing.shown = true;
    } else {
      thing.shown = false;
    }            
  });   
};

And pass the id in the view:

<a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>

answered Dec 3, 2014 at 6:00

user12121234

2,5792 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

ng-hide & ng-show in AngularJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related