Question

我对AngularJS很新。我的问题是过滤 - 使用自定义功能。我想获得以下内容：

产品类别的复选框
产品子类别的复选框
产品展示

当用户点击某个类别时，子类别必须更新（启用，选择），然后更新产品（已过滤）。

到目前为止，我在角度（app.js）方面有什么：

var ProductApp = angular.module('ProductApp', []);

var rootUrl = $("#linkRoot").attr("href");

ProductApp.controller('ProductController', function ($scope, $http, $timeout) {

    $http.get(rootUrl + '/GetJsonCategories').success(function (data) {
        $scope.categories = data;
    });

    $http.get(rootUrl + '/GetJsonSubCategories').success(function (data) {
        $scope.subcategories = data;
    });

    $http.get(rootUrl + '/GetJsonProducts').success(function (data) {
        $scope.products = data;
    })
    .then(function (data, status, headers, config) {

        $timeout(function () {
            runJqueryScripts();
        }, 0); // time here
    })

    $scope.showAll = true;

    function ForceFilterFn() {
        for (product in $scope.products) {
            $scope.filterFn($scope.products[product]);
        }
    };


    $scope.filterFn = function (product) {

        if ($scope.showAll) { return true; }

        var sel = false;

        for (category in $scope.subcategories) {
            var t = $scope.subcategories[category];

            if (t.selected) {
                if (product.CategoryId === t.CategoryId ) {
                    return true;
                }
            }
        }
        return sel;
    };


    $scope.ChangeCategory = function () {
        alert("Category Changed");
    };

    $scope.ChangeSubCategory = function () {
        for (t in $scope.subcategories) {
            if ($scope.subcategories[t].selected) {
                $scope.showAll = false;
                //ForceFilterFn();
                return;
            }
        }
        $scope.showAll = true;
        //ForceFilterFn();
    };


});

function equalHeight(group) {
    tallest = 0;
    group.each(function () {
        thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.each(function () { $(this).height(tallest); });
}

function runJqueryScripts() {
    equalHeight($(".thumbnail"));

    $("[rel='tooltip']").tooltip();

    $('.thumbnail').hover(
        function () {
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function () {
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    );
}

就html标记而言：

<div ng-app="ProductApp" class="container">

        <!-- upper section -->
        <div class="row">
            <div class="col-sm-3">
                <!-- left -->
                <h3><i class="glyphicon glyphicon-cog"></i> Filters</h3>
                <hr>

                <ul ng-controller="ProductController" class="nav nav-stacked" id="categoryfilter">
                    <li>
                        <a id="MainCategory" href="">
                            <i class="glyphicon glyphicon-tag"></i> Product categories
                        </a>
                    </li>
                    <li ng-repeat="category in categories">
                        <input type="checkbox" ng-model="category.selected" value="{{category.CategoryId}}" ng-change="ChangeCategory()"> {{category.Text}}
                    </li>
                </ul>

                <ul ng-controller="ProductController" class="nav nav-stacked" id="subcategoryfilter">
                    <li>
                        <a id="SubCategory" href="">
                            <i class="glyphicon glyphicon-tags"></i> Product sub-categories
                        </a>
                    </li>
                    <li ng-repeat="subcategory in subcategories">
                        <input type="checkbox" ng-model="subcategory.selected" value="{{subcategory.CategoryId}}" ng-change="ChangeSubCategory()"> {{subcategory.Text}}
                    </li>

                </ul>

                <hr>

            </div><!-- /span-3 -->
            <div class="col-sm-9">

                <!-- column 2 -->
                <h3><i class="glyphicon glyphicon-dashboard"></i> Products </h3>

                <hr>

                <div ng-controller="ProductController" class="row">
                    <div ng-repeat="product in products | filter:filterFn" class="col-xs-6 col-sm-4">
                        <div class="thumbnail">
                            <img ng-src="@Url.Action("LoadImage", "Images")?ImagePath={{ product.ImagePath}}" alt="Product image" class="img-responsive" />
                            <div class="caption">
                                <strong> {{ product.ProductName }}</strong>
                                <p> {{ product.Description }}</p>
                                <p>
                                    <span class="label label-primary pull-left">Price</span>
                                    <span class="label label-primary label-as-badge pull-right"> {{ product.Price }} </span>
                                </p>
                                <p>
                                    <a href="#" class="btn btn-primary center-block" role="button">
                                        <span class="glyphicon glyphicon-shopping-cart" style="vertical-align:middle"></span> Order
                                    </a>
                                </p>
                            </div>
                            <strong>{{ product.ProductName }}</strong>
                        </div>
                    </div>

                </div>


                <!--/col-span-6-->

            </div><!--/row-->
        </div><!--/col-span-9-->

    </div><!--/row-->


@section Scripts{
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/app.js")"></script>
}

此时过滤无效。产品未更新。好像我应该重新提交所有内容，因为$scope.filterFn只会在页面加载时被调用一次。

非常感谢您的任何帮助。

Answer 1

可能是因为您已为ProductController和ProductCategory块分配了多个SubCategory。两个（三个用于显示的计数）是相同控制器的不同实例。因此，它们每个都有相同products变量的副本。我建议将ProductController绑定到父元素，而不是在子元素中执行三次。

这可能是你想要的：

<div ng-app="ProductApp" class="container">

    <!-- upper section -->
    <div class="row" ng-controller="ProductController" >
        <div class="col-sm-3">
            <!-- left -->
            <h3><i class="glyphicon glyphicon-cog"></i> Filters</h3>
            <hr>

            <ul class="nav nav-stacked" id="categoryfilter">
                <li>
                    <a id="MainCategory" href="">
                        <i class="glyphicon glyphicon-tag"></i> Product categories
                    </a>
                </li>
                <li ng-repeat="category in categories">
                    <input type="checkbox" ng-model="category.selected" value="{{category.CategoryId}}" ng-change="ChangeCategory()"> {{category.Text}}
                </li>
            </ul>

            <ul class="nav nav-stacked" id="subcategoryfilter">
                <li>
                    <a id="SubCategory" href="">
                        <i class="glyphicon glyphicon-tags"></i> Product sub-categories
                    </a>
                </li>
                <li ng-repeat="subcategory in subcategories">
                    <input type="checkbox" ng-model="subcategory.selected" value="{{subcategory.CategoryId}}" ng-change="ChangeSubCategory()"> {{subcategory.Text}}
                </li>

            </ul>

            <hr>

        </div><!-- /span-3 -->
        <div class="col-sm-9">

            <!-- column 2 -->
            <h3><i class="glyphicon glyphicon-dashboard"></i> Products </h3>

            <hr>

            <div class="row">
                <div ng-repeat="product in products | filter:filterFn" class="col-xs-6 col-sm-4">
                    <div class="thumbnail">
                        <img ng-src="@Url.Action("LoadImage", "Images")?ImagePath={{ product.ImagePath}}" alt="Product image" class="img-responsive" />
                        <div class="caption">
                            <strong> {{ product.ProductName }}</strong>
                            <p> {{ product.Description }}</p>
                            <p>
                                <span class="label label-primary pull-left">Price</span>
                                <span class="label label-primary label-as-badge pull-right"> {{ product.Price }} </span>
                            </p>
                            <p>
                                <a href="#" class="btn btn-primary center-block" role="button">
                                    <span class="glyphicon glyphicon-shopping-cart" style="vertical-align:middle"></span> Order
                                </a>
                            </p>
                        </div>
                        <strong>{{ product.ProductName }}</strong>
                    </div>
                </div>

            </div>


            <!--/col-span-6-->

        </div><!--/row-->
    </div><!--/col-span-9-->

</div><!--/row-->

Angular JS - 过滤ng-repeat

1 个答案: