Search code examples
angularjsangularjs-ng-repeatangularjs-ng-class

How to set class to first item in ng-repeat that has been sorted with orderBy?


I have a list of items, which comes in unsorted, I use orderBy to sort by name alphanumerically.

<li class="ticker-li"
    ng-repeat="ticker in tickers | orderBy:'ticker'"
    ng-class="{'selected':ticker.selected}">

    <div class="ticker"
         ng-click="unselectAll(); ticker.selected = !ticker.selected;
         selectTicker(ticker);
         revealTickerOptions()">
         {{ticker.ticker}}
    </div>

Now in my controller this is how I'm currently setting the first items selected class:

var vs = $scope;
vs.tickers = data;
vs.tickers[0].selected = true;

^ This worked perfectly until I needed to add the orderBy so that items appear by alpha order:

enter image description here

I found this answer here, however it locks the first item to always have the class.

Modifying my code a bit, I was able to have other buttons gain that class on click, however the $first item still stayed with the class.

ng-class="{'selected':$first || ticker.selected}"

In my controller this is my unselectAll function, which doesn't work with 'selected':$first:

vs.unselectAll = function() {
    for (var i = 0; i < vs.tickers.length; i++) {
        vs.tickers[i].selected = false;
    }
};

enter image description here

How should the code either in the markup or controller need to be updated to fix this issue?


Solution

  • Give this a shot, I'm not sure how it reads the $index on the sort by, but get rid of the $first thing and put this init statement in there.

    <li class="ticker-li"
        ng-repeat="ticker in tickers | orderBy:'ticker'" 
        ng-init="$index ? ticker.selected = false : ticker.selected = true"
        ng-class="{'selected':ticker.selected}" ng-click="unselectFirst($index)">
    

    I think this is a grey area between a hack or not, you aren't technically aliasing a property in the ng-init, but i think it is a fine line. The other solution would be sort the array in your controller, there is an example in the docs that sort on alphabetic order, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort