Angular display message if list is empty

Question

I'm displaying subwebs that the current user has access to, in a sharepoint app part.

I've managed to hide or show a message saying "There is no sites avaiable for you" if my app.js returns 0 in the scope.array.

BUT, the message is displaying before the list has finished loading and when the list has loaded the message dissapears. How can I fix that?

I have a ng-repeat in a table with textbox for filtering:

<input type="text" ng-model="text" placeholder="Filter..." />

<div ng-controller="MainCtrl">
    <table>
        <thead>
            <tr>
                <th>
                    Site
                </th>
                <th>
                    Created
                </th>
            </tr>
        </thead>
        <tbody ng-repeat="site in sites | filter:text">
            <tr>
                <td>
                  {{site.title}}
                </td>
                <td>
                  {{site.created | date:dateFormat}}
                </td>
            </tr>
        </tbody>
    </table>
    <div ng-show="!(sites| filter:text).length">There is no sites avaiable for you.</div>
</div>

I understand that the ng-show is outside the table where ng-repeat is executed, but I've tried inserting the ng-show div inside the tbody but then if no sites exist the table is never executed.

Also, how can I disable the filter textbox if the array is empty? Tried the same attributes as ng-show but in ng-disabled, but that doesnt work.

azium · Accepted Answer · 2014-10-02 00:34:07Z

3

Wait for your success callback to determine there are no results before showing the message.

//view
<div ng-controller="MainCtrl">
  <div ng-show="loading">Loading..</div>
  <input ng-hide="noSites" ng-model="text" placeholder="Filter...">
  //table ..
  <div ng-show="noSites">
    There are no sites available for you.
  </div>
</div>

//controller
app.controller('MainCtrl', function($scope) {

    //initialize
    $scope.loading = true
    $scope.noSites = false

    //sharepoint code to get sites
    .success(function(data) {
      if (data.length != 0) {
        $scope.sites = data
      } else {
        $scope.noSites = true
      }
      $scope.loading = false
    })
})

answered Oct 2, 2014 at 0:34

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kalhan · Accepted Answer · 2014-09-15 10:52:25Z

2

<input type="text" ng-model="text" placeholder="Filter..." />

put this inside the <div ng-controller="MainCtrl">.. div

and modify this

<div ng-show="!sites.length" style="display:none">There is no sites avaiable for you.</div> // added `display:none

edited Sep 15, 2014 at 10:52

answered Sep 15, 2014 at 10:35

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

4 Comments

Robin Over a year ago

Thanks, that worked. Now I just need help with the text displaying to the users if the array is empty. Do you know how to solve that?

Robin Over a year ago

Hmm. Now, if the array is empty the div ng-show doesnt show, because style is display:none?

Kalhan Over a year ago

try ng-style="display:none" instead style="display:none"

Robin Over a year ago

Still showing before the list finished loading, but now it works if the array doesn't have any value. I have to put this div tag AFTER the list loaded, but it's loading the div (that's last in order) before the list??

Collectives™ on Stack Overflow

Angular display message if list is empty

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related