ngShow Example

by Ravindra Athreya

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<div ng-app="app">
    <div ng-controller="MainController">
        <div ng-repeat="thing in things">

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

            </div>
        </div>
    </div>
</div>

JavaScript

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
    $scope.things = [{
        id: 1,
        data: 'One',
        shown: true
    }, {
        id: 2,
        data: 'Two',
        shown: false
    }, {
        id: 3,
        data: 'Three',
        shown: true
    },  ];
                     
    $scope.flipMode = function (id) {
      $scope.things.forEach(function(thing) {
        if(thing.id == id) {
          thing.shown = true;
        } else {
          thing.shown = false;
        }            
      });   
    };
}]);