ng-repeat passes only first element to the function

Question

I have following code in my app:

 <li ng-repeat="data in array"> <ul class="social-share"> <li> <a href="" rel="popover" popover data-popover-content="#myPopover"><i class="fa fa-share-alt"></i>Share</a> <div id="myPopover" class="hide"> <strong>Social Share</strong> <ul class="social-spacing"> <li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share(data.translation)">Facebook</a></li> </ul> </div> </li> </ul> <p class="eng-translation">{{data.translation}}</p> </li>

I'm using an angular directive to show the popover which contains social sharing options. Directive is as follows:

 myApp.directive('popover', function() { return function(scope, elem) { elem.popover({ container: 'body', html: true, content: function () { var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); return clone; } }).click(function(e) { e.preventDefault(); }); } });

All of the data in array displays properly as is supposed to be with ng-repeat. But, when I click on the Facebook share button, it only sends the first element of the array to the function "share". If I don't use popover, it works fine. Any help on this would be really kind.

Edit: Array object added

 $scope.array = [ { 'translation': 'translation-1' }, { 'translation': 'translation-2' }, { 'translation': 'translation-3' }, { 'translation': 'translation-4' }, { 'translation': 'translation-5' }, { 'translation': 'translation-6' }, { 'translation': 'translation-7' } ];

Answer 1

You can find the working version of your code below here. Are you missing to add ng-app="app" or ng-controller="myController" elements?

 var myApp = angular.module('app', []); myApp.controller('myController', ['$scope', function($scope) { $scope.myArray = [ { 'translation': 'translation-1' }, { 'translation': 'translation-2' }, { 'translation': 'translation-3' }, { 'translation': 'translation-4' }, { 'translation': 'translation-5' }, { 'translation': 'translation-6' }, { 'translation': 'translation-7' } ]; $scope.share = function($index) { alert($scope.myArray[$index].translation); }; }]); myApp.directive('popover', function() { return function(scope, elem) { elem.popover({ container: 'body', html: true, content: function () { var clone = elem.siblings('#myPopover').clone(true).removeClass('hide').css("display", "inherit"); return clone; } }).click(function(e) { e.preventDefault(); }); } });

 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div ng-app="app"> <div ng-controller="myController"> <li ng-repeat="myData in myArray"> <ul class="social-share"> <li> <a href="" rel="popover" popover><i class="fa fa-share-alt"></i>Share</a> <div id="myPopover" class="hide"> <strong>Social Share</strong> <ul class="social-spacing"> <li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share($index)">Facebook</a></li> </ul> </div> </li> </ul> <p class="eng-translation">{{myData.translation}}</p> </li> </div> </ </body> </html>

ng-repeat passes only first element to the function

Question

1 answers

solution1
0 ACCPTED 2016-09-02 13:07:50

ng-repeat passes only first element to the function

Question

1 answers

solution1 0 ACCPTED 2016-09-02 13:07:50

solution1
0 ACCPTED 2016-09-02 13:07:50