why row click event not work properly in angular?

Question

I am trying to expand and collapse row on row click .But In my demo I clicked on any row it open only last row why ?In other words I am trying to show and hide row description on row click but when I click it show the description of third row only ,Not demand on which row I clicked .it only expand the third row .

here is my code

angular.module('app',['ionic']).controller('apptes',function($scope){
 $scope.toogle_item=false;
 $scope.obj=[{
   number:"123",
   name:"bil"
 },{
   number:"547",
   name:"till"
 },{
   number:"123223",
   name:"test"
 }]
  $scope.clickrow=function(){
    $scope.toogle_item=!$scope.toogle_item;
  }


})

Answer 1

There are 2 problems

1. You need to have one item-body/item tabs per each item in the array, in your code that is outside of the ng-repeat so there is only one set of those. To solve this I've moved the ng-repeat to a layer up
2. Since you want to show only 1 item at a time, you can opt for an index based solution like given below

So

angular.module('app', ['ionic']).controller('apptes', function($scope) {
  $scope.toogle_item = false;
  $scope.obj = [{
    number: "123",
    name: "bil"
  }, {
    number: "547",
    name: "till"
  }, {
    number: "123223",
    name: "test"
  }]
  $scope.clickrow = function(index) {    
    $scope.toogle_item = $scope.toogle_item === index ? -1 :  index;
  }


})

.bg, .item.bg {
  background: lightgray;
  position: relative;
}
.ptag {
  position: absolute;
  top: 0;
  left: 0;
  width: 7%;
  border: 1px solid red;
  height: 100%;
  background: lightblue;
  color: white;
}
.circle {
  width: 50px;
  height: 50px;
  float: right;
  border-radius: 100%;
  background: green;
  margin-top: -7%;
  line-height: 50px;
  text-align: center;
  color: black!important;
}

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
<div ng-app="app">
  <div ng-controller="apptes">
    <div class="list card">

      <div ng-repeat="n in obj track by $index">
        <div class="item item-avatar bg" ng-click="clickrow($index)">
          <p class="ptag">P</p>
          <h2>{{n.number}}</h2>
          <p>{{n.name}}</p>
          <p class="circle">650</p>
        </div>
        <div ng-show="toogle_item === $index">
          <div class="item item-body">

            <p>
              This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.
            </p>
            <p>
              <a href="#" class="subdued">1 Like</a>
              <a href="#" class="subdued">5 Comments</a>
            </p>
          </div>

          <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
              <i class="icon ion-thumbsup"></i>
              Like
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-chatbox"></i>
              Comment
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-share"></i>
              Share
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>