AngularJS使用基于grandson json元素的ng show

我的应用程序中有以下json数据：

{  
   "Success":true,
   "Error":null,
   "Data":{  
      "VersionId":1,
      "SecretaryId":1,
      "SecretaryName":"Foo",
      "Status":1,
      "Schools":[  
         {  
            "SchoolId":123456,
            "SchoolName":"Equipe de Desenvolvimento do Portal",
            "ContractStatus":1,
            "TotalTeachers":2,
            "TotalStudents":0,
            "Grades":[  
               {  
                  "GradeId":1,
                  "GradeName":"2º Year",
                  "TotalStudents":0,
                  "Classes":[  
                     {  
                        "SelectedYear":{  
                           "AvailableYear":null,
                           "Contract":null,
                           "Id":2,
                           "Canceled":false,
                           "EngagedAreas":null,
                           "Registrations":null
                        },
                        "Id":2,
                        "Name":"A",
                        "TotalStudents":20,
                        "TotalA3":1,
                        "StudentsPCD":"1,2,3"
                     },
                     {  
                        "SelectedYear":{  
                           "AvailableYear":null,
                           "Contract":null,
                           "Id":2,
                           "Canceled":false,
                           "EngagedAreas":null,
                           "Registrations":null
                        },
                        "Id":3,
                        "Name":"B",
                        "TotalStudents":25,
                        "TotalA3":0,
                        "StudentsPCD":"1"
                     }
                  ]
               },
               {  
                  "GradeId":2,
                  "GradeName":"3º Year",
                  "TotalStudents":0,
                  "Classes":[  

                  ]
               },
               {  
                  "GradeId":3,
                  "GradeName":"4º Year",
                  "TotalStudents":0,
                  "Classes":[  

                  ]
               }
            ]
         },
         {  
            "SchoolId":52640002,
            "SchoolName":"EscTesRelatDir",
            "ContractStatus":0,
            "TotalTeachers":0,
            "TotalStudents":0,
            "Grades":[  
               {  
                  "GradeId":1,
                  "GradeName":"2º Year",
                  "TotalStudents":0,
                  "Classes":[  

                  ]
               },
               {  
                  "GradeId":2,
                  "GradeName":"3º Year",
                  "TotalStudents":0,
                  "Classes":[  

                  ]
               }
            ]
         }
      ]
   }
}

我使用这个json动态创建一些HTML。 为每个学校创建一个div，这是第一级。对于学校的每个年级，都会创建一个表，这是第二级。对于grade a表格行中的每个类，这是第三级

我想知道，如果相关学校至少有一个班级，如何使用ng show命令来显示第一级div

我找了很多，但还没有找到答案

编辑：

这是我的html代码

<div ng-repeat="school in data.schools" ng-show="{{ school.Grades.<AnyClass?>.length > 0 }}">
    <h2>{{ school.SchoolName }}</h2>
    <span><strong>Total Teachers:</strong> {{ school.TotalTeachers }}</span>
    <table ng-repeat="grade in school.Grades" class="table table-bordered table-striped table-condensed" ng-show="{{ grade.Classes.length > 0 }}">
        <tbody>
            <tr>
                <th colspan="4">{{ grade.GradeName }}</th>
            </tr>
            <tr>
                <th>Class</th>
                <th>Total Students</th>
                <th>Total A3</th>
                <th>PCD Students</th>
            </tr>
            <tr ng-repeat="class in grade.Classes">
                <td>{{ class.Name }}</td>
                <td>{{ class.TotalStudents }}</td>
                <td>{{ class.TotalA3 }}</td>
                <td>{{ class.StudentsPCD }}</td>
            </tr>
        </tbody>
    </table>
</div>

---

我认为在你的模板中是不可能的，因为你不能在不同的

ng repeat

s中冒泡。但您可以向每个

学校

对象添加另一个属性，无论其

类

数组长度在控制器中是否大于0：

//part of app.js
RegistrationResource.get({
    "idAplicacao": 1,
    "idSecretaria": 1
}, function (data) {
    if (data.Success) {
        angular.forEach(data.Schools, function(item) {
            angular.forEach(item.Grades, function(item2) {
                (item2.Classes.length > 0) && item.show = true;
            });
        });
        $scope.data = data.Data;
        runApplication();
    } else {
        toastr.error(Errors.Code1);
    }
    hideLoading();
});

---

然后，只需在标记中添加

ng show=“show”

。

获取数据后，您可以对其进行更改或添加任何“帮助器”属性，以控制要显示的元素或如何显示它们。考虑下面的示例，它使任何具有“长标题”的条目红色大于40个字符：

HTML模板

<body ng-controller="Ctrl">
  <b><u>Posts</u></b>
  <div ng-repeat="post in posts">
    <span ng-class="{ 'red': post.longTitle }">
      id:{{ post.id }} title:{{ post.title }}
    </span>
  </div>
</body>  

CSS

结果

---

这对我来说是不可能的，因为此数据来自外部服务。那么，您如何请求/获取此数据？请共享您的请求代码。如果您正在进行AJAX调用，只需将我的代码粘贴到您的

。然后（）function@andre不管数据来自哪里，一旦你收到它，你可以用它做任何你想做的事情
<body ng-controller="Ctrl">
  <b><u>Posts</u></b>
  <div ng-repeat="post in posts">
    <span ng-class="{ 'red': post.longTitle }">
      id:{{ post.id }} title:{{ post.title }}
    </span>
  </div>
</body>  

app.controller('Ctrl', function($scope, $http) {
  var url = 'http://jsonplaceholder.typicode.com/posts';

  // get data
  $http.get(url).then(function(response) {
    // take top 10
    var data = response.data.slice(0, 10);   

    // add helper property called "long title" that
    // doesn't exists in original data
    angular.forEach(data, function(current) {
      current.longTitle = current.title.length > 40 ? true : false;
    });

    // apply
    $scope.posts = data;
  });
});

.red {
  color: red;
}