Javascript 如何从嵌套的ng repeat中调用多个angularjs服务调用_Javascript_Angularjs_Angularjs Ng Repeat_Angularjs Service

Javascript 如何从嵌套的ng repeat中调用多个angularjs服务调用

javascript angularjs

Javascript 如何从嵌套的ng repeat中调用多个angularjs服务调用,javascript,angularjs,angularjs-ng-repeat,angularjs-service,Javascript,Angularjs,Angularjs Ng Repeat,Angularjs Service,我正在用AngularJs制作一个简单的体育用品购物应用程序我的情况是有三个嵌套的ng重复第一个循环：获取品牌名称。我已经编写了angularjs服务，它调用rest端点来获取品牌列表（阿迪达斯、Yonex、Stiga等）。我会在页面（控制器）加载后立即调用此服务第二个循环：对于每个品牌，我想显示他们提供的产品类别。在这个循环中，我想执行一个函数/服务，它将品牌名称作为输入，并获取品牌的所有类别。为此，我还有一个angularjs服务，它调用rest端点获取给定品牌名称的类别列表第三个循

我正在用AngularJs制作一个简单的体育用品购物应用程序

我的情况是有三个嵌套的ng重复

第一个循环：获取品牌名称。我已经编写了angularjs服务，它调用rest端点来获取品牌列表（阿迪达斯、Yonex、Stiga等）。我会在页面（控制器）加载后立即调用此服务

第二个循环：对于每个品牌，我想显示他们提供的产品类别。在这个循环中，我想执行一个函数/服务，它将品牌名称作为输入，并获取品牌的所有类别。为此，我还有一个angularjs服务，它调用rest端点获取给定品牌名称的类别列表

第三个循环：对于每个品牌和类别，我想展示该类别中的产品。在这个循环中，我想执行一个函数，将品牌名称和类别作为输入，并获取该类别中的所有产品。我需要一个angularjs服务调用，它将调用rest端点来获取给定品牌名称和类别的产品

样本数据集：

Adidas
-----T-Shirts
----------V-Neck
----------RoundNeck
-----Shoes
----------Sports Shoes
----------LifeStyle Shoes
Yonex
-----Badminton Racquet
----------Cabonex
----------Nanospeed
-----Shuttlecocks
----------Plastic
----------Feather
Stiga
-----Paddle
----------Procarbon
----------Semi-carbon
-----Ping Pong Balls
----------Light Weight
----------Heavy Weight

(function () {
    'use strict';
    angular.module('SportsShoppingApp.controllers').controller('sportsController', ['sportsService', '$scope', function (sportsService, $scope) {

        $scope.brands = [];
        $scope.categories = [];
        $scope.products = {};

        $scope.getBrands = function () {
            sportsService.getBrands()
                .then(loadBrands, serviceError);
        };

    var loadBrands = function(response) {
        $scope.brands= response.data;
    };


        $scope.getCategories = function(brand) {
            sportsService.getCategories(brand)
                .then(loadCategories, serviceError);
        };

    var loadCategories = function (response) {
            $scope.categories = response.data;
        };


        $scope.getProducts = function(brand, category) {
            sportsService.getProducts(brand, category)
                .then(loadProducts, serviceError);
        };

    var loadProducts = function (response) {
            $scope.products = response.data;
        };

        var serviceError = function (errorMsg) {
            console.log(errorMsg);
        };

    $scope.getBrands();

    }]);
}());

请注意，由于一些限制，我无法在REST端使用域对象来模拟上面显示的数据结构

我希望以树状的方式显示上述数据（在上面显示的相同行上，可能带有展开/折叠选项）。下面是代码片段

控制器：

Adidas
-----T-Shirts
----------V-Neck
----------RoundNeck
-----Shoes
----------Sports Shoes
----------LifeStyle Shoes
Yonex
-----Badminton Racquet
----------Cabonex
----------Nanospeed
-----Shuttlecocks
----------Plastic
----------Feather
Stiga
-----Paddle
----------Procarbon
----------Semi-carbon
-----Ping Pong Balls
----------Light Weight
----------Heavy Weight

(function () {
    'use strict';
    angular.module('SportsShoppingApp.controllers').controller('sportsController', ['sportsService', '$scope', function (sportsService, $scope) {

        $scope.brands = [];
        $scope.categories = [];
        $scope.products = {};

        $scope.getBrands = function () {
            sportsService.getBrands()
                .then(loadBrands, serviceError);
        };

    var loadBrands = function(response) {
        $scope.brands= response.data;
    };


        $scope.getCategories = function(brand) {
            sportsService.getCategories(brand)
                .then(loadCategories, serviceError);
        };

    var loadCategories = function (response) {
            $scope.categories = response.data;
        };


        $scope.getProducts = function(brand, category) {
            sportsService.getProducts(brand, category)
                .then(loadProducts, serviceError);
        };

    var loadProducts = function (response) {
            $scope.products = response.data;
        };

        var serviceError = function (errorMsg) {
            console.log(errorMsg);
        };

    $scope.getBrands();

    }]);
}());

HTML:

<div class="well">
    <div class="row">
        <div id="sportsHeader" class="col-md-3">
            <div ng-repeat="brand in brands.data">
                <div class="row">
                    <div class="col-md-9">{{brand}}</div>
                </div>
                <div ng-repeat="category in categories.data" ng-init="getCategories(brand)">
                    <div class="row">
                        <div class="col-md-9">{{category}}</div>
                    </div>
                    <div ng-repeat="product in products.data" ng-init="getProducts(brand, category)">
                        <div class="row">
                            <div class="col-md-9">{{product}}</div>
                        </div>
                    </div>  
                </div>  
            </div>
        </div>
    </div>
</div>


{{brand}}
{{category}}
{{product}}

当我使用上面的HTML时，UI上只显示品牌名称。不显示类别及其对应的产品。我知道有些重叠正在发生。我不确定我的做法是否正确。我的方法可能完全错了。我对AngularJS是新手。我想知道如何在嵌套的ng repeat中循环，以便每个ng repeat都可以调用angularjs服务，并且我想以树的方式显示数据，如上图所示。有人能帮我吗？

我想

ng init

s必须放在

ng repeat

s的单独标签上：

<div class="well">
    <div class="row">
        <div id="sportsHeader" class="col-md-3">
            <div ng-repeat="brand in brands.data">
                <div class="row">
                    <div class="col-md-9">{{brand}}</div>
                </div>
                <div ng-init="getCategories(brand)">
                    <div ng-repeat="category in categories.data">
                        <div class="row">
                            <div class="col-md-9">{{category}}</div>
                        </div>
                        <div ng-init="getProducts(brand, category)">
                            <div ng-repeat="product in products.data">
                                <div class="row">
                                    <div class="col-md-9">{{product}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{brand}}
{{category}}
{{product}}

您可能还需要调整引导类，移动

ng init

只是为了固定角度部分。

我认为

ng init

s必须放在

ng repeat

s的单独标记上：

<div class="well">
    <div class="row">
        <div id="sportsHeader" class="col-md-3">
            <div ng-repeat="brand in brands.data">
                <div class="row">
                    <div class="col-md-9">{{brand}}</div>
                </div>
                <div ng-init="getCategories(brand)">
                    <div ng-repeat="category in categories.data">
                        <div class="row">
                            <div class="col-md-9">{{category}}</div>
                        </div>
                        <div ng-init="getProducts(brand, category)">
                            <div ng-repeat="product in products.data">
                                <div class="row">
                                    <div class="col-md-9">{{product}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{brand}}
{{category}}
{{product}}

您可能还需要调整引导类，移动

ng init

只是为了固定角度部分。

将

ng init

指令移动到它们提供数据的

ng repeat

之外

<div class="well">
    <div class="row">
        <div id="sportsHeader" class="col-md-3">
            <!-- MOVE init of categories here -->
            <div ng-repeat="brand in brands.data"  ng-init="getCategories(brand)">
                <div class="row">
                    <div class="col-md-9">{{brand}}</div>
                </div>
                <!-- MOVE init of products here -->
                <div ng-repeat="category in categories.data"  ng-init="getProducts(brand, category)">
                    <div class="row">
                        <div class="col-md-9">{{category}}</div>
                    </div>
                    <div ng-repeat="product in products.data">
                        <div class="row">
                            <div class="col-md-9">{{product}}</div>
                        </div>
                    </div>  
                </div>  
            </div>
        </div>
    </div>
</div>


{{brand}}
{{category}}
{{product}}

ng init

指令的优先级为450；

ng重复

，优先级为1000。这意味着当它们位于同一元素上时，

ng init

在

ng repeat

指令之后执行。
ng repeat
for
categories.data
不会执行它的
ng init
，直到它有一个category。因此，它的
ng init
不能用于填充
类别
数组

快速提问。我的方法正确吗
该方法可行，但它违反了框架的定义和原则
模型是因为视图只是模型的投影，所以控制器与视图完全分离，并且不知道它。这使得测试成为一个快照，因为在没有视图和相关的DOM/浏览器依赖项的情况下，很容易单独测试控制器

使用
ng repeat
和
ng init
指令构建模型会产生一种依赖关系，使得测试和调试变得困难。（这个问题证明了这一点。）

我的建议是学习如何通过和使用来构建模型。
将
ng init
指令移到它们提供数据的
ng repeat
之外

<div class="well"> <div class="row"> <div id="sportsHeader" class="col-md-3">  <div ng-repeat="brand in brands.data" ng-init="getCategories(brand)"> <div class="row"> <div class="col-md-9">{{brand}}</div> </div>  <div ng-repeat="category in categories.data" ng-init="getProducts(brand, category)"> <div class="row"> <div class="col-md-9">{{category}}</div> </div> <div ng-repeat="product in products.data"> <div class="row"> <div class="col-md-9">{{product}}</div> </div> </div> </div> </div> </div> </div> </div>

{{brand}}