Table loses sort after function call in Angular

Question

I have a table that uses Angular orderby. I use a function called tcoSort that makes a calculation and then sorts the table. The problem is when I call displayFullPricing() from the radio button in the rows - the table loses the sorting.

<table class="table table-striped table-hover">
    <tr  ng-repeat="prices in productVariant.prices | orderBy: tcoSort">
    <td>£{{prices.monthly.retailPrice}}</td>
    <td>£{{prices.nonRecurring.retailPrice | number:0}}</td>
    <td><input type="radio" name="{{productVariant.code}}"  ng-click="displayFullPricing($index)"></td>
</tr>

$scope.tcoSort = function (productVariant) {
if(!$scope.isDisplayPrice){
    return  productVariant.nonRecurring.retailPrice + (productVariant.monthly.retailPrice * 36);
}
};


$scope.displayFullPricing = function (index) {

   $scope.isDisplayPrice = true; //This is to stop the table sort running more than once. 
I put this here to act as a flag as everytime this function was called from the radio button, tcoSort would fire again and sort the table. 
This meant that the radio button would only work once.

   //rest of code
}

I guess the issue is that I am creating the flag to stop the sort happening every time I click a radio button in the table. But If i don't put it there, the $index is always set to the top result - so it would always be 0.

Nat Wallbank · Accepted Answer · 2015-03-17 12:34:01Z

3

Instead of passing the $index of the relevant item to your displayFullPricing function you should just pass the object itself, e.g.

ng-click="displayFullPricing(prices)"

Presumably somewhere in // rest of code you're just selecting the relevant item based on its index anyway?

answered Mar 17, 2015 at 12:34

Nat Wallbank

1,45713 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jose the hose Over a year ago

Thank you for your answers. I actually do pass in prices into displayFullPricing - the full function is here plnkr.co/edit/XGyMgMuIi5P6iqQygZnY?p=catalogue

Nat Wallbank Over a year ago

I'm a bit confused by your use of 'prices'. If you're passing it to 'displayFullPricing' within the ng-repeat then you're passing a single item from the collection (which is productVariant.prices). If you're just looking to track which element in productVariant.prices is selected then why not have a 'selectedPrice' property on scope which tracks it? Then there's no messing around with indexes and selectedIndexes, and you can drive your UI based on that selectedPrice object which should contain the info you need?

Jose the hose Over a year ago

I see your point. I guess I am passing in the same thing twice to displayFullPricing! Yes, I am trying to track which productVariant.prices is selected and then set it to true while setting the others to false so I can then update some JSON (Thats why I was using the foreach function). I will refactor it. Thanks

Collectives™ on Stack Overflow

Table loses sort after function call in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related