Question

我正在进行一些角度的开发，我正在建立一个非常简单的例子，但不知怎的，我被卡住了......（是的，是的，我知道棱角分明5出来了，我不应该用angularjs做，但我我只是想比较不同的方法）

所以我的应用程序有一个带有id，名称和类别的简单Car对象。类别正好是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>

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>

使用$ filter过滤器，当angular解析ng-repeat中的文本时（或者你正在传递一个字符串或数组的任何地方，而angular正在解析它），它会被自动使用。

上面的示例只过滤了所提供值的任何字段，下面的示例为currentCategory（on scope）值指定了一个名为“category”的属性。

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

Angularjs根据属性

1 个答案: