Using ng-click inside np-repeat

Question

I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.

While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.

I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.

Can someone help me understand what's going wrong here and probably a better way to do this if possible.

I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.

Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?

//locationsapp.js var locationsApp = angular.module('locationsApp', []);


var venues = [{
  id: "Flknm",
  name: "ship",
}, {
  id: "lelp",
  name: "boat",
}, {
  id: "myp",
  name: "yacht",
}, ];

var shortlistedVenues = [];


var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);



locationsApp.controller("getvenues", function($scope) {
  $scope.venues = venues;
  $scope.shortlistThis = function(venue) {
    console.log(venue);
    if (shortlistedVenues.indexOf(venue) == -1) {
      shortlistedVenues.push(venue);
      //alert('If');
    } else {
      console.log('already shortlisted')
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="locations" ng-app="locationsApp">
  <div ng-controller="getvenues">
    <div ng-repeat="venue in venues" ng-mouseover="" class="venue">
      <div ng-controller="manageInfo">
        <div class="row-fluid">
          <div class="control" ng-click="showInfo()">
          </div>
          <div class="maps" class="info">
            <div ng-class="class">
              <div class="close-info" ng-click="hideInfo()">
                <i class="fa fa-times">
                </i>
              </div>
              <div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
                <div class="">
                  <div class="row-fluid myclass">
                    <div class="button-holder">
                      <div class="row-fluid">
                        <div class="col-md-4 col-xs-4 text-center btn-grid">
                          <button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
                            Shortlist{{$index}}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End of Full Info Container -->
              </div>
            </div>

          </div>
        </div>
        <div class="compare">
          <button type="button" class="btn btn-default btn-lg btn-sup">
            Compare ( {{shortlistedVenues.length}} )
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index

HTML

<div ng-if="selected==$index" class="button-holder">
    <div class="row-fluid">
        <div class="col-md-4 col-xs-4 text-center btn-grid">
            <button type="button" class="btn btn-default btn-lg btn-sup" 
            ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
        </div>
    </div>
</div>

& then put ng-click="selected='$index'" on ng-repeat div like

<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">

Working Fiddle

Hope this could help you, Thanks.