vendredi 24 juin 2016

Angular apply ng-style to indexed element inside ng-repeat


I'm having some trouble with understanding how exactly should i access a specific element inside an ng-repeat block.

My HTML code is :

<li  ng-repeat="item in shows"  class="list-container" ng-swipe-right="swipdir('right',$index)" ng-swipe-left="swipdir('left',$index)">
           <div ng-style="swipe" style="display:none"><img style="left:-10px; position:relative;" src="images/gar.png" ng-click="test()"></div>
           <section ng-style="sec" style="width:500px;">  
            <div >Current position:<br>S{{item.season}}E{{item.ep_id}}<br><span id="show">{{item.name}}</span> </div>
            <img ng-click="showDiv = !showDiv" width="120px" height="120px" ng-src="{{item.link}}"></img> 
             </section>
         </li>


$scope.swipdir = function (dir,index) {
    if(dir=="left")
    {
        $scope.swipe={'display':'none','width':'100px','height': '155px', 'left':'0px','background':'#f6343f', 'position': 'absolute','top':'0px'};
        $scope.sec={'left':'0px','position': 'relative'};
    }
    else
    {
        $scope.swipe={'display':'block','width':'100px','height': '155px', 'left':'0px','background':'#f6343f', 'position': 'absolute','top':'0px'};
        $scope.sec={'left':'200px','position': 'relative'};
   }
};

What i'm trying to do is apply the style (swipe and sec) only on the swiped LI, but now it's being applied to all LIs.

I have tried playing around with the $index but couldn't get the exact way.

I Tried

$scope.shows[index].swipe

And some other variations but it didn't work.

Thanks

Edit: I was looking at it the wrong way regarding ng-repeat child scopes. I removed ng-style and changed class manually through the controller and now it's ok.


Aucun commentaire:

Enregistrer un commentaire