Question

我的应用程序中有以下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 ，这是第一个级别。对于学校中的每个年级，都会创建一个表，这是第二个级别。对于成绩中的每个班级，都会创建表格行，这是第三级。

我想知道如果相关学校至少有一个 class <，我怎么能使用 ng-show 命令来显示第一级 div / em>的

我搜索了很多，但我还没找到答案。

修改

这是我的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>

修改这就是我提出要求的方式：

//rest_client.js "use strict"; (function(){ var restClient = angular.module("restClient", ["ngResource"]); var serviceURL = "/habileapp/api/"; restClient.factory("RegistrationResource", ["$resource", function ($resource) { return $resource(serviceURL + "Registration", null, { "get": { "method": "get" }, "save": { "method": "post", "url": serviceURL + "Registration/Save" }, "finalize": { "method": "post", "url": serviceURL + "Registration/Finalize" } }); }]); })(); //part of app.js RegistrationResource.get({ "idAplicacao": 1, "idSecretaria": 1 }, function (data) { if (data.Success) { $scope.data = data.Data; runApplication(); } else { toastr.error(Errors.Code1); } hideLoading(); });

Answer 1

我认为在您的模板中不可能，因为您无法通过不同的ng-repeat冒泡。但是，您可以为每个school对象添加另一个属性，无论其Classes数组长度是否大于控制器中的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"。

Answer 2

获取数据后，您可以更改数据或添加任何＆＃34;帮助＆＃34;可用于控制要显示的元素或如何显示它们的属性。请考虑以下示例，该示例使任何具有＆＃34;长标题＆＃34;的条目变为红色，超过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>

的JavaScript

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;
  });
});

CSS

.red {
  color: red;
}

结果

enter image description here

AngularJS使用基于孙子json元素的ng-show

2 个答案: