$ionicGesture on ng-repeat element

1

Hi,

I am still new with Angular and Ionic, but really like them a lot!

Here what I want to know.

I have a view with a list of element generated by an ng-repeat.

  <ion-content>
    <div class="list card">
      <div ng-repeat="site in sitesView.sites">
          <a href="#" class="item item-icon-left item-icon-right">
          <i class="icon ion-home"></i>
          {{ site.name }}, {{ site.id }}
          <i class="icon ion-ios7-arrow-right"></i>
        </a>
      </div>
    </div>
  </ion-content>

I have a controller for that view:

myApp.controller("SitesViewCtrl", ['$scope', '$ionicGesture', function(scope, ionicGesture) {
  this.sites = [
    {    
      id: 1,
      name: "Site #1",
      ip: "10.97.222.100"
    },
    {
      id: 2,
      name: "Site #2",
      ip: "10.12.23.4"
    },
    {
      id: 3,
      name: "Site #3",
      ip: "10.6.43.2"
    },
    {
      id: 4,
      name: "Site #4",
      ip: "20.5.4.3"
    }
  ];
  
  
  this.onHold = function (event) {
    // can I know which element received the event from here?
  };
  
  ionicGesture.on('hold', this.onHold, $element);

}]);

Now, I want to associate the “hold” gesture to any repeated element (site in sites) and when the event occurs, I want to know which element received that event.

How this can be done? How to do the link between the gesture and the current element that received the event?

Hope that someone already did something like that before.

Thanks a lot in advance

1 Like
2

How I do it is put everything in the ng-repeat inside a <div> and give it a class, e.g.

<ion-content>
    <div class="list card">
      <div ng-repeat="site in sitesView.sites">
          <div class="example">
          <a href="#" class="item item-icon-left item-icon-right">
          <i class="icon ion-home"></i>
          {{ site.name }}, {{ site.id }}
          <i class="icon ion-ios7-arrow-right"></i>
        </a>
        </div>
      </div>
    </div>
  </ion-content>

Then in your angular, you can select it like this:

 $scope.exampleFunction = function(index) {
    var myList = document.getElementsByClassName('example');
    myList[index].style.visibility="hidden";
    }

My example would then hide whichever ng-repeat was clicked. Obviously edit it to your requirements e.g. with a gesture etc.

Hope that helps.

3

MrNiamh,

What if I want to make the difference between a “click” event and a “hold” event?

I thought the ionicGesture will be needed, no?

4

I believe it would be yes, I just left out ionicGesture in my example as I have not used it before.

5

I found another solution based on this Codepen

My View:

  <ion-content>
    <div class="list card">
      <div ng-repeat="site in sitesView.sites">
        <div my-on-hold="sitesList.onHold(site)">
          <a href="#" class="item item-icon-left item-icon-right">
            <i class="icon ion-home"></i>
            {{ site.name }}
            <i class="icon ion-ios7-arrow-right"></i>
          </a>
        </div>
      </div>
    </div>
  </ion-content>

My controller:

myApp.controller("SitesViewCtrl", function() {
  this.sites = [
    {    
      id: 1,
      name: "Site #1",
      ip: "10.97.222.100"
    },
    {
      id: 2,
      name: "Site #2",
      ip: "10.12.23.4"
    },
    {
      id: 3,
      name: "Site #3",
      ip: "10.6.43.2"
    },
    {
      id: 4,
      name: "Site #4",
      ip: "20.5.4.3"
    }
  ];


  this.onHold = function (site) {
    console.log("Hold");
  };

});

My directive:

myApp.directive('myOnHold', function($ionicGesture) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      $ionicGesture.on('hold', function(e) {
        $scope.$eval($attr.myOnHold);
      }, $element);  
    }
  }
});
1 Like