2

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?

Community
  • 1
  • 1
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529

1 Answers1

2

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

Andrew Clavin
  • 574
  • 2
  • 15
  • Sorry, added my ng-click code above: `ng-click="unselectAll(); ticker.selected = !ticker.selected; selectTicker(ticker); revealTickerOptions()"` – Leon Gaban May 06 '15 at 03:11
  • Ah I think this is close, not getting it to work just yet however... vs.tickers[0].selected is not the first item when sort by alpha is on. – Leon Gaban May 06 '15 at 03:18
  • Want to throw a plunker up? I'm a little confused why the for loop isn't taking care of it – Andrew Clavin May 06 '15 at 03:18
  • Hmm I will try, ok yeah the problem is `$first` my unselectAll function turns the selected status of all items to false. However since the check is `'selected':$first` the first item always has the selected class. – Leon Gaban May 06 '15 at 03:21
  • 1
    alrigt i revised my answer, maybe i should have just made a second answer, oh well – Andrew Clavin May 06 '15 at 03:34
  • Nice! This works :D, now I have a 2nd problem, however with ng-init I can pass in the index I need... – Leon Gaban May 06 '15 at 03:43