How to use ng-toggle and ng-class to change icon while using ng-click:predicate

Question

I'm using predicate to easily sort items in my data model. Now I've working on adding in an up and down arrow icons to show which state the sort is currently in.

Example of predicate orderBy in action: http://plnkr.co/edit/?p=preview

enter image description here

Not sure how to toggle those values however within predicate:

<button type="button"
        class="btn btn-default"
        ng-click="predicate = 'added_epoch'; reverse=!reverse;">
        <div ng-class="recentAdded == 'up' ? 'iconUpBig' : 'iconDownBig'"></div>
        Recently added
</button>

Controller

$scope.recentAdded = 'up'

I'm not using a function here, which is why it's a bit hard for me to see how to toggle it now.

Is there a way to hook into this and change the recentAdded var?
Which will inturn change the ng-class:

ng-click="predicate = 'added_epoch'; reverse=!reverse;"

Then based on the predicate, toggle the ng-class:

ng-class="recentAdded == 'up' ? 'iconUpBig' : 'iconDownBig'"

The `predicate =` syntax made it super easy to sort the items based on different values inside the `ng-repeated` items. I didn't have to create a function... now the scope has increased — Leon Gaban, Apr 14 '15 at 20:55
@salniro oh that was just an example from the Angular docs of `predicate` — Leon Gaban, Apr 14 '15 at 21:13

score 3 · Accepted Answer · answered Apr 14 '15 at 20:58

3

I would simply add a scope function. You don't want to put so much logic in your markup that it's hard to see what's going on.

// could accept a predicate using a parameter
$scope.toggleSort = function() {
  // whatever other logic you need
  if ($scope.recentAdded === 'up') $scope.recentAdded = 'down';
  else $scope.recentAdded = 'up';
};

answered Apr 14 '15 at 20:58

SethGunnells

1,269
1
12
19

Hmm, ok I just did a test.. I can chain a `toggleSort` function into the `ng-click` the logic there is so simple and only on 4 buttons, seems possibly too much to bring that back in, trying this out now.. – Leon Gaban Apr 14 '15 at 21:03
Thanks this suffices :) `ng-click="predicate = 'added_epoch'; reverse=!reverse; toggleSort('recent')"` Then I use a switch statement to change the 4 different `ng-class` sort variables. – Leon Gaban Apr 14 '15 at 21:13

How to use ng-toggle and ng-class to change icon while using ng-click:predicate

1 Answers1