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
- you need have 1
item-body
/item tabs
per each item in array, in code outside ofng-repeat
there 1 set of those. solve i've movedng-repeat
layer up - 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
Post a Comment