如何使用AngularJS显示“无数据”消息？

Question

代码如下：

<table>
    <tr ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
    <tr ng-show="!actionList.length">
        <td>
            No data.                
        </td>
    </tr>
</table>

这有效，但不是我想要的方式，因为它最初显示“无数据”消息。如果actionList.length不为0，我最初需要显示任何内容，并且表中包含数据。如果actionList.length为0则显示“No data”消息，但不显示为表的一部分。

更新

我已添加到我的控制器中：

$scope.isButtonClicked = false;

$scope.queryResult = function () {
    $scope.isButtonClicked = true;
    $scope.actionList = [];
    $scope.actionsQuery.resetPage();
    appendPage();
};

但是，“没有数据。”每次点击都会显示消息。当有一些数据时，它会很快出现并消失，当没有数据时，它会正确显示。

Answer 1

为什么你会混淆？很多方法你都可以考虑解决这个问题。

尝试这种简单的方法

<table>
    <tr ng-show="actionList.length!=0" ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
    <tr >
        <td ng-show="actionList.length==0">
            No data.                
        </td>
    </tr>
</table>

更新1： -

• 您还需要检查actionList是未定义还是null
• 您应该$scope.actionList是array
• 您可以使用ng-if Statement 检查actionList null或未定义（尝试使用ng-if而不是div标签中的ng-show）

下面这样的事情

<div ng-show="actionList !='null' && actionList !='undefined'">
 <table>
        <tr ng-show="actionList.length!=0" ng-repeat="action in actionList">
            <td></td>
            ...
        </tr>
        <tr >
            <td ng-show="actionList.length==0">
                No data.                
            </td>
        </tr>
    </table>
</div>
<div ng-show="actionList =='null'|| actionList =='undefined'">
 No data. 
</div>

更新2： -

另一种简单的方法，而不是我的更新1

尝试以下代码。

<table>
    <tr ng-show="actionList!='undefined' && actionList!='null' && actionList.length!=0"  ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
    <tr >
    <td ng-show="actionList=='undefined' ||actionList=='null' || actionList.length==0 ">
            No data.                
        </td>
    </tr>
</table>

  

您可以尝试使用ng-if代替ng-show

更新3：

  

我想要，因为它最初显示＆＃34;没有数据＆＃34;信息。如果actionList.length不为0，我最初需要显示任何内容，并且表中包含数据。如果actionList.length为0则显示＆＃34;无数据＆＃34;消息，但不是表格的一部分。

如此简单......

• 创建一个新的布尔范围变量，如命名为IsButtonClick

• 全球声明$scope.IsButtonClick==false

• 在按钮点击事件

上设置$scope.IsButtonClick==true

然后复制以下代码而不是您的HTML代码。

<div ng-show="IsButtonClick">
    <table>
            <tr ng-show="actionList!='undefined' && actionList!='null' && actionList.length!=0"  ng-repeat="action in actionList">
                <td></td>
                ...
            </tr>           
        </table>
</div>
<div ng-show="IsButtonClick"> <span ng-show="actionList=='undefined' ||actionList=='null' || actionList.length==0 "> No data.</span>  </div>

更新4：

  

但是，＆＃34;没有数据。＆＃34;每次点击都会显示消息。如果有一些数据很快就会显示并消失，当没有数据时，它会正确显示

试试这种方式

$scope.queryResult = function () { 
        $scope.isButtonClicked = false;      
        $scope.actionList = [];
        $scope.actionsQuery.resetPage();
        appendPage();
        if($scope.actionList.Length==0)
        {
          $scope.isButtonClicked = true;
        }
    };

和html是

<div ng-show="IsButtonClick">
        <table>
                <tr ng-show="actionList!='undefined' && actionList!='null' && actionList.length!=0"  ng-repeat="action in actionList">
                    <td></td>
                    ...
                </tr>           
            </table>
    </div>
    <div ng-show="IsButtonClick"> <span ng-hide="actionList !='undefined' || actionList!='null' || actionList.length!=0 "> No data.</span>  </div>

Answer 2

尝试放

<tr ng-show="!actionList.length">
    <td ng-bind="noData">

    </td>
</tr>

Answer 3

试试这个：

<div ng-switch="!!actionsList.length">

  <div ng-switch-when="true">
    <table>
      <tr ng-repeat="...">
        <td> ... </td>
      </tr>
    </table>
  </div>

  <div ng-switch-when="false">
    No data
  </div>

</div>

Answer 4

尝试ng-if：

<div ng-if="actionList && actionList.length === 0">
    No data.
</div>

<table ng-if="actionList && actionList.length > 0">
    <tr ng-repeat="action in actionList">
        <td></td>
        ...
    </tr>
</table>

只要actionList是falsy（undefined或null），就不会显示任何内容。