javascript - why row click event not work properly in angular? -


i trying expand , collapse row on row click .but in demo clicked on row open last row why ?in other words trying show , hide row description on row click when click show description of third row ,not demand on row clicked .it expand third row .

here 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;   }   }) 

there 2 problems

  1. you need have 1 item-body/item tabs per each item in array, in code outside of ng-repeat there 1 set of those. solve i've moved ng-repeat layer up
  2. since want show 1 item @ time, can opt index based solution 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 $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>                "facebook" styled card. header created thumbnail list item, content card-body consisting of image , paragraph text. footer consists of tabs, icons aligned left, within 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>                             </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>


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

python - How to remove the Xframe Options header in django? -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -