Angularjs Filter Table contents based on a property

Question

I am getting into some angular development and I am building a very simple example, but somehow I am stuck... (Yes, yes I know angular 5 is out and I should't be doing it with angularjs, but I am just interested to compare the different approaches)

So my application has a simple Car object with an id, name and category. The categories are exactly 3 and based on them I am showing 3 tabs and based on the currently selected tab, I add a car to this particular category.

Here is a screenshot:

So while the adding and removal work fine, the displaying/filtering of cars based on the category doesn't and I am not sure what is the right approach here.

My goal is that when I click on a 'tab', then I filter only the cars from that category.

This is part of my simple controller:

function CarController($scope, id, CarService) {
    $scope.allCars = [];

    $scope.name = '';
    $scope.currentCategory = 'Sport';
    $scope.categories = ['Sport', 'Luxury', 'Normal'];

    $scope.addCar = addCar;
    $scope.deleteCar = deleteCar;

    $scope.setCurrentCategoryItem = function (item) {
        $scope.currentCategory = item;
    };

function addCar() {
        CarService.addCar($scope.name, $scope.currentCategory);
        $scope.name = '';
    }

Here I have a simple function that is responsible for persisting the data:

function addCar(name, category, callback) {
        callback = callback || angular.noop;
        var Car = ResourceService.getResource(url, id);

        var newCar = new Car();
        newCar.name = name;
        newCar.category = category;
        newCar.$save(callback);
    }

And here is my html template:

<div class="row">
<div class="col-xs-12">
    <h1>Cars</h1>
</div>
<div class="tabbable tabs-below">
    <ul class="nav nav-tabs">
        <li ng-repeat="category in categories" ng-class="{active: category == currentCategory}">
            <a href="" ng-click="setCurrentCategoryItem(category)">{{category}}</a>
        </li>
    </ul>

    <div id="{{currentCategory}}" class="tab-content">

    <hr/>
        <div class="tab-pane active" role="tabpanel">
            <div class="row">
                <div class="col-xs-12">
                    <form ng-submit="addCar()" novalidate name="form">
                        <div class="alert alert-danger" ng-show="form.name.$error.notIn">
                            No duplicates allowed!
                        </div>

                        <div class="row">
                            <div class="col-xs-9">
                                <fieldset class="form-group">
                                    <input type="text" class="form-control" placeholder={{currentCategory}}
                                           ng-model="name" required name="name"
                                           not-in="allCars"/>
                                </fieldset>
                            </div>
                            <div class="col-xs-3">
                                <button class="btn btn-success btn-block" type="submit"
                                        data-description="submitLink"
                                        ng-disabled="form.name.$pristine|| form.name.$error.required || form.name.$error.notIn">
                                    Add
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <table class="table table-striped">
                <tr data-ng-repeat="car in allCars">
                    <td>{{car.name}}</td>
                    <td class="text-right">
                        <button class="btn btn-danger" ng-click="deleteItem(car)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

           <tr data-ng-repeat="car in allCars | filter: category">
                <td>{{car.name}}</td>
                <td class="text-right">
                    <button class="btn btn-danger" ng-click="deleteItem(car)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </td>
            </tr>

Use the $filter filter it is automatically used when angular parses the text in an ng-repeat (or anywhere you're passing a string or array really and angular is parsing it).

Example above just filters any fields for the value supplied, the below example specifies some property called "category" for the currentCategory (on scope) value.

           <tr data-ng-repeat="car in allCars | filter: {category: currentCategory}">
                <td>{{car.name}}</td>
                <td class="text-right">
                    <button class="btn btn-danger" ng-click="deleteItem(car)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </td>
            </tr>