AngularJS 循环变量没有按预期工作

Question

此代码的 JSFiddle 位于 http://jsfiddle.net/done_merson/x3r4o0aj/7/。这是 HTML:

    <div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>

        <p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}
            <p ng-repeat="subsubCategory in getSubSubCategories(subCategory.name)">{{ subsubCategory.amount }}
        </p> 
    </div>
</div>

这里是 JS 代码：

angular.module("app", [])
    .controller('ctrl', ['$scope',

function ($scope) {
    $scope.model = {
        categories: [{
            "Id": 1,
            name: '1'
        }, {
            "Id": 2,
            name: '2'
        }],
        subCategories: [{
            "parentId": 1,
            name: 'a1'
        }, {
            "parentId": 1,
            name: 'a2'
        },
                       {
            "parentId": 2,
            name: 'a3'
        }],
        subsubcategories:[
            {
            "name":'a1',
            "amount": 43
          },
          {
            "name":'a1',
            "amount": 21
          },
          {
            "name":"a2",
            "amount": 25
          },
          {
            "name":"a3",
            "amount": 33
          },
          {
            "name":"a3",
            "amount": 17
          }
          
        ]
    }
    $scope.getSubCategories = function(parentId){
        var result = [];
        for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
            if(parentId === $scope.model.subCategories[i].parentId){
                result.push($scope.model.subCategories[i]);               
            }
        }
        console.log(parentId)
        return result;
    }
    $scope.getSubSubCategories = function(name){
    
        var subresult = [];
        for(var i = 0 ; i < $scope.model.subsubcategories.length ; i++){
            if(name === $scope.model.subsubcategories[i].name){
                subresult.push($scope.model.subsubcategories[i]);               
            }
        }
        console.log(name)
        return subresult;
    }
}])

第一个循环工作正常 (model.categories)，但下一个循环的内部循环传递未定义 subCategory.name。我可以不将 subCategory 传递到下一个循环吗？还是我做错了什么？我真正想做的是能够像使用 Access 或 ReportServer 那样创建一个报告，其中您可以对数据进行分组和汇总。如果有人有类似的代码，我也很想看一个例子。

Answer 1

您的 html 无效 -- 将内部 p 更改为 span（同时添加 </span>），它将起作用。

html 中的错误并不总是会导致如此棘手的事情，但最好始终保持有效。

Answer 2

立即查看

 
angular.module("app", [])
    .controller('ctrl', ['$scope',

function ($scope) {
    $scope.model = {
        categories: [{
            "Id": 1,
            name: '1'
        }, {
            "Id": 2,
            name: '2'
        }],
        subCategories: [{
            "parentId": 1,
            name: 'a1'
        }, {
            "parentId": 1,
            name: 'a2'
        },
                       {
            "parentId": 2,
            name: 'a3'
        }],
        subsubcategories:[
            {
            "name":'a1',
            "amount": 43
          },
          {
            "name":'a1',
            "amount": 21
          },
          {
            "name":"a2",
            "amount": 25
          },
          {
            "name":"a3",
            "amount": 33
          },
          {
            "name":"a3",
            "amount": 17
          }
          
        ]
    }
    $scope.getSubCategories = function(parentId){
        var result = [];
        for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
            if(parentId === $scope.model.subCategories[i].parentId){
                result.push($scope.model.subCategories[i]);               
            }
        }
        console.log(parentId)
        return result;
    }
    $scope.getSubSubCategories = function(name){
    
        var subresult = [];
        for(var i = 0 ; i < $scope.model.subsubcategories.length ; i++){
            if(name === $scope.model.subsubcategories[i].name){
                subresult.push($scope.model.subsubcategories[i]);               
            }
        }
        console.log(name)
        return subresult;
    }
}])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>

        <p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}
            <span ng-repeat="subsubCategory in getSubSubCategories(subCategory.name)">{{ subsubCategory.amount }} </span>
        </p> 
    </div>
</div>

AngularJS 循环变量没有按预期工作

AngularJS loop variable not working as expected

angularjs