如果列表为空，角度显示消息

Question

我正在共享点应用程序部分中显示当前用户有权访问的子网站。

如果我的 app.js 在 scope.array 中返回 0，我已经设法隐藏或显示一条消息“没有可用的网站”。

但是，消息在列表完成加载之前显示，当列表加载时消息消失。我该如何解决？

我在带有用于过滤的文本框的表格中有一个 ng-repeat：

<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>

我知道 ng-show 位于执行 ng-repeat 的表之外，但我尝试将 ng-show div 插入到 tbody 内，但如果不存在任何站点，则永远不会执行该表。

另外，如果数组为空，如何禁用过滤器文本框？尝试了与 ng-show 相同的属性，但在 ng-disabled 中，但这不起作用。

Answer 1

等待您的成功回调确定没有结果，然后再显示消息。

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

Answer 2

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

把这个放在<div ng-controller="MainCtrl">.. div中

修改一下

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