Use ng-show/ng-hide based on results to display messages or show content

Question

I have a function where I build and return a JSON like this:

{"message":"No se encontraron Grupos de MetaDetalles","entities":[],"breadcrumbs":[],"parent_id":0}

Then I have a view in Angular as follow:

<table id="example-datatables" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="span1"></th>
            <th><i class="icon-bookmark"></i> Nombre</th>
            <th><i class="icon-bookmark"></i> Padre</th>
            <th><i class="icon-bolt"></i> Descripción</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="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                    <a href="#/detailsgroup/delete/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Eliminar" 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>

What I need is if entities has a empty array then do not show the table#example-datatables instead show the error message stored in message in the same JSON, maybe ng-show/ng-hide is the solution but I don't know how to use it, any help or advice?

EDIT 1: code stop working

I have the same JSON return as follow:

{
   "message":"No se encontraron Grupos de MetaDetalles",
   "entities":[

   ],
   "breadcrumbs":[

   ],
   "parent_id":0
}

My controller.js have this code:

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 hay conexión con el servidor.";
            }
        });

        $scope.changeUrl = function(id) {
            $location.path('/detailsgroup/list' + '/' + id);
        }
}]);

In my template I have this:

<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="recargaCategories(item_breadcrumbs.id)">{% verbatim %}{{ breadcrumb.name }} &#187; {% endverbatim %}</a>
        </li>
    </ol>
</div>

<a class="btn btn-success" href="#/detailsgroup/add" style="margin-bottom: 20px"><i class="icon-plus"></i> Agregar Grupo De Detalle</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> Nombre</th>
            <th><i class="icon-bookmark"></i> Padre</th>
            <th><i class="icon-bolt"></i> Descripción</th>
            <th class="span1">Acciones</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="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                    <a ng-click="confirmDeleteMetaDetailGroup(item.id,item._token)" data-toggle="tooltip" title="Eliminar" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a> -->
                </div>
            </td>
        </tr>
    </tbody>
</table>

But for some reason it's not working since things never show or hide, what is wrong?

Answer 1

Here is a jsBin showing how I did it with ng-show and ng-hide

Basically:

<div ng-show="entities.length === 0">
  {{message}}
</div>

<table ng-hide="entities.length === 0" id="example-datatables" class="table table-striped table-bordered table-hover">
<thead>
    <tr>
        <th class="span1"></th>
        <th><i class="icon-bookmark"></i> Nombre</th>
        <th><i class="icon-bookmark"></i> Padre</th>
        <th><i class="icon-bolt"></i> Descripción</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="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                <a href="#/detailsgroup/delete/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Eliminar" 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>

Answer 2

For showing the table only if the array has items use:

<table ng-show="MetaDetailGroup.entities.length" ...

Then you can show a div for the message like:

<div ng-hide="MetaDetailGroup.entities.length" ...

For example: http://jsfiddle.net/3Nhuk/