AngularJS using ng-show based on grandson json element - json

Question

I have the following json data in my application:
{
"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":[
]
}
]
}
]
}
}
I use this json to dynamically create some HTML.
For each school a div is created, this is the first level. For each grade in the school, a table is created, this is the second level. And for each class in the grade a table row is created, this is the third level.
I'm wondering how could I use the ng-show command to show the first level div only if the related school have at least one class.
I've searched a lot, but I couldn't find an answer yet.
EDIT:
Here is my html code.
<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>
EDIT
This is how I'm making my requests:
//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

I don't think it is possible within your template since you cannot bubble up through the different ng-repeats. But you could add another attribute to each school object whether its Classes array length is greater than 0 within your controller:
//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();
});
Then, just add ng-show="show" in your markup.

Answer 2

After getting the data you can change it or add any "helper" properties that you can use to control the elements you want to show or how to show them. Consider the following example which makes any entry red that has a "long title", being more than 40 characters:
HTML template
<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;
}
Result