Home Angularjs Filter Table contents based on a property
Reply: 0

Angularjs Filter Table contents based on a property

user4388 Published in March 18, 2018, 2:12 am

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;

And here is my html template:

<div class="row">
<div class="col-xs-12">
<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>

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

        <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 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"
                            <div class="col-xs-3">
                                <button class="btn btn-success btn-block" type="submit"
                                        ng-disabled="form.name.$pristine|| form.name.$error.required || form.name.$error.notIn">
            <table class="table table-striped">
                <tr data-ng-repeat="car in allCars">
                    <td class="text-right">
                        <button class="btn btn-danger" ng-click="deleteItem(car)">
                            <span class="glyphicon glyphicon-remove"></span>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.31095 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO