1

Working on a project where users can vote on items, and after an orderBy, the function works only on the original indexes of the items. I would like to track the items by their ID property which is pulled from the database but am having issues. I have also tried passing the objects rather than their indexes but again am having trouble getting my head around it.

Relevant JS

angular.module("cardSite", ['masonry'])
    .controller('mainCtrl', function($scope, dataService) {
        $scope.cards = [];
        dataService.getCards().then(function(response) {
            $scope.cards = response.data;
        }, function() {});

        $scope.plusOne = function($index) {
            $scope.cards[$index].card_rating += 1;
        };
    });

Relevant HTML 

<div class="col-lg-3 tile grid-item" ng-repeat="card in cards | orderBy : '-card_rating' | limitTo:8 track by card.ID">
<div class="panel panel-default {{ card.card_category | lowercase }}_panel">
    <p>Card ID: {{card.ID}}</p>
    <!DOCTYPE svg>
    <p ng-click="plusOne($index)"> Vote up</p>
    <p>{{card.card_rating}}</p>
</div>

Does anyone have any suggestions?

Jackanapes
  • 1,023
  • 1
  • 8
  • 12

1 Answers1

3

Why do you need your index in this case?

You could just pass the object directly : 

<p ng-click="plusOne(card)"> Vote up</p>

And change your function to:

$scope.plusOne = function(card) {
        card.card_rating += 1;
};
Harald F.
  • 4,505
  • 24
  • 29