How to sort table by value using ng-if?

Issue

I'm a novice at AngularJS and trying to get my table to only show the rows that have a 'color' value of true when the user selects the 'Color Only' item from the Sort By drop down menu.

Here's my sort menu code:

<label>Sort By:</label>
  <select ng-model="orderProp">
     <option value="title">Title</option>
     <option value="filename">File Name</option>
     <option value="class">Classification</option>
     <option value="color">Color Only</option>
  </select>

Here is my table code:

<table>

            <thead>
                <tr>
                    <th>Classification</th>
                    <th>Title</th>
                    <th>File</th>
                    <th>Color</th>

                </tr>
            </thead>
            <tbody>
                <tr ng-animate="'animate'" ng-repeat="item in filtered = (pptData | filter: query | orderBy: orderProp)">
                    <td>{{item.class | uppercase}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.filename}}</td>
                    <td>{{item.color}}</td>

                </tr>
            </tbody>

        </table>

I tried adding ng-if="color"to the ng-repeat directive but that did not work. Live link here.

Solution

Use

ng-if="orderProp !== 'color'  || item.color"

on your ng-repeat element.

As you should know, when you refer to a property in an Angular directive expression, the property is resolved against the current $scope. ng-repeat creates a child scope for every iteration. When you specify ng-repeat="item in collection", you can then reference that child scope via the property item.

The color property is on that item child scope, not on the outer scope. Thus, saying ng-if="color" will result in none of the rows being rendered, because $scope.color is undefined. ng-if="item.color" will resolve against the item scope, and the row will only be rendered if item.color is defined.

However, if you only want to filter out those rows when the user has selected the color filtering option, you need to make sure you check the orderProp. Thus,

ng-if="orderProp !== 'color' || item.color"

gets the behavior you are looking for.

---

I suspect you will want to continue to do more complex filtering on these rows as you develop the code. In that case, I would recommend instead writing a function in your controller:

$scope.shouldShowRow = function(row, index) {
    var show = $scope . orderProp !== 'color" || row.color;
    // more logic for determining show/hide here
    return show;
}

And then in your template:

<tr ng-repeat="item in (pptData | filter: query | orderBy: orderProp)"
    ng-if="shouldShowRow(item, $index)">
    <!-- your row markup here -->
</tr>

$index is a handy value that ng-repeat creates. You may not need it, but it might be useful.

---

As a suggestion, you should look into the controllerAs syntax. It requires you to name all of your controllers' scopes, and will help you keep track of what scope you are using when:

<div ng-controller="MyController as my">
    ...
    <tr ng-repeat="item in (my.pptData | filter: query | orderBy: my.orderProp)"
        ng-if="my.shouldShowRow(item, $index)">
        ...
    </tr>
</div>

ControllerAs:
http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

Answered By - Jon Hieb