One of my functions builds and returns a JSON object like this:
{"message":"No Grupos de MetaDetalles found","entities":[],"breadcrumbs":[],"parent_id":0}
Now, I have an Angular view set up like this:
<table id="example-datatables" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="span1"></th>
<th><i class="icon-bookmark"></i> Name</th>
<th><i class="icon-bookmark"></i> Parent</th>
<th><i class="icon-bolt"></i> Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in MetaDetailGroup">
<td class="span1">
<div class="btn-group">
<a href="#/detailsgroup/edit/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="#/detailsgroup/delete/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td><a href="javascript:void(0)">{% verbatim %}{{ item.name }}{% endverbatim %}</a></td>
<td><a href="javascript:void(0)">{% verbatim %}{{ item.parent }}{% endverbatim %}</a></td>
<td>{% verbatim %}{{ item.description }}{% endverbatim %}</td>
</tr>
</tbody>
</table>
I am looking for a way to not display the table#example-datatables if the entities array is empty. Instead, I want to show the error message stored in the JSON under message. Would using ng-show/ng-hide be the solution? If so, how should I implement it?
EDIT 1: The code is no longer functioning
The JSON response remains the same:
{
"message":"No Grupos de MetaDetalles found",
"entities":[
],
"breadcrumbs":[
],
"parent_id":0
}
Here's the code snippet from my controller.js:
app.controller('MetaDetailGroupList', ['$scope', '$http', '$location', '$routeParams', '$route', 'noty', function($scope, $http, $location, $routeParams, $route, $noty) {
var id = "";
if ($routeParams.id !== undefined) {
id = '/' + $routeParams.id;
}
$http.get(Routing.generate('meta-detail-group-list') + id).success(function(data) {
if (data.message) {
$scope.message = data.message;
} else {
$scope.MetaDetailGroup = data;
$scope.orderProp = 'name';
}
}).error(function(data, status, headers, config) {
if (status == '500') {
$scope.message = "No server connection.";
}
});
$scope.changeUrl = function(id) {
$location.path('/detailsgroup/list' + '/' + id);
}
}]);
In my template, I have the following:
<div ng-show="MetaDetailGroup.entities.length === 0" class="alert">
{% verbatim %}{{ message }}{% endverbatim %}
</div>
<div ng-hide="MetaDetailGroup.entities.length === 0">
<ol class="breadcrumb">
<li ng-repeat="breadcrumb in MetaDetailGroup.breadcrumbs">
<a href="javascript:void(0)" ng-click="reloadCategories(item_breadcrumbs.id)">{% verbatim %}{{ breadcrumb.name }} » {% endverbatim %}</a>
</li>
</ol>
</div>
<a class="btn btn-success" href="#/detailsgroup/add" style="margin-bottom: 20px"><i class="icon-plus"></i> Add Detail Group</a>
<table id="example-datatables" class="table table-striped table-bordered table-hover" ng-hide="MetaDetailGroup.entities.length === 0">
<thead>
<tr>
<th><i class="icon-bookmark"></i> Name</th>
<th><i class="icon-bookmark"></i> Parent</th>
<th><i class="icon-bolt"></i> Description</th>
<th class="span1">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in MetaDetailGroup.entities | orderBy:orderProp">
<td><a href="javascript:void(0)" ng-click="changeUrl(item.id)">{% verbatim %}{{ item.name }}{% endverbatim %}</a></td>
<td><a href="javascript:void(0)">{% verbatim %}{{ item.parent }}{% endverbatim %}</a></td>
<td>{% verbatim %}{{ item.description }}{% endverbatim %}</td>
<td class="span1">
<div class="btn-group">
<a href="#/detailsgroup/edit/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a ng-click="confirmDeleteMetaDetailGroup(item.id,item._token)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a> -->
</div>
</td>
</tr>
</tbody>
</table>
Unfortunately, things are not displaying or hiding as expected. What could be causing this issue?