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

Answer 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