Angularjs基于属性过滤表内容

我进入了一些角度的发展,我正在建立一个非常简单的例子,但不知怎的,我被卡住了。。。(是的,是的,我知道Angular5已经过时了,我不应该用angularjs来做,但我只是有兴趣比较不同的方法)

因此,我的应用程序有一个简单的汽车对象,带有id、名称和类别。 类别正好是3个,基于它们,我显示了3个选项卡,基于当前选择的选项卡,我添加了一辆车到这个特定的类别。

下面是一个屏幕截图:

因此,虽然添加和删除工作正常,但基于类别的汽车显示/过滤并不正常,我不确定这里的正确方法是什么。

我的目标是,当我点击“标签”时,我只过滤该类别的汽车。

这是我的简单控制器的一部分:

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 = '';
    }

这里我有一个简单的函数,负责保存数据:

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);
    }

这是我的html模板:

<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>