CODEWITHSUNDEEP
angularjsionic-framework
Vandervidi
Vandervidi

Reputation: 692

Attaching click events to Ionic list elements (using Angular.Js)

I have an Ionic list in my app and im populating it dynamically with elements. Im trying also to attach a tap/click listener that will just alert the DOM list element. Im trying to avoid using jQuery and do it just by angular. I tried the following and i dont understand why the click functions dont fire.

HTML

<ul class="list">
    <li class="item" data-ng-repeat="c in contacts()" data-ng-click="selectedElem(selection)">
        {{ c.displayName }}
     </li>
</ul>

The relevant controller code:

$scope.selectedElem = function(selection){
    alert(selection);
};

Upvotes: 0

Views: 2701

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

Replace data-ng-click="selectedElem(selection)" with data-ng-click="selectedElem(c)" , c is the that specific item. As you are doing c in contacts().

var app = angular.module('myApp', []);
  app.controller('MainCtrl', function($scope) {
  $scope.contacts = function(){
   return   [{displayName:"abc"}, {displayName:"def"}, {displayName:"igh"}];
  }
  $scope.selectedElem = function(selection){
    alert(selection);
  };
 });
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-route.js"></script> 
<body ng-app="myApp" ng-controller="MainCtrl">
<ul>
    <li data-ng-repeat="c in contacts()" data-ng-click="selectedElem(c)">
        {{ c.displayName }}
     </li>
</ul>
   
</body>

Upvotes: 4

Related Questions