Question

如果找不到搜索到的记录，我怎样才能显示找不到数据

这里是代码：

    <table>
        <tbody>
            <tr ng-repeat="e in employee | filter :search">
                <td>{{ e.Name | uppercase }}</td>
                <td>{{ e.Email | lowercase }}</td>
                <td>{{ e.Age }}</td>
                <td>{{ e.Gender }}</td>
                <td>{{ e.DeptId == "" ? 'Null' : e.DeptId}}} </td>
            </tr>
            <tr ng-show="search.length == 0" >
                <td  colspan="5"> No Data found</td>
            </tr>

        </tbody>
    </table>

Answer 1

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.employee = [{
    "Name": "Jack",
    "Email": "jack@email.com",
    "Age": "25",
    "Gender": "M",
    "DeptId": ""
  }, {
    "Name": "Bob",
    "Email": "bob@email.com",
    "Age": "26",
    "Gender": "M",
    "DeptId": ""
  }]
});

table,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search" />
  <table>
    <tbody>
      <tr ng-repeat="e in filteredEmployee = (employee | filter : search)">
        <td>{{ e.Name | uppercase }}</td>
        <td>{{ e.Email | lowercase }}</td>
        <td>{{ e.Age }}</td>
        <td>{{ e.Gender }}</td>
        <td>{{ e.DeptId == "" ? 'Null' : e.DeptId}}</td>
      </tr>
      <tr ng-show="filteredEmployee.length == 0">
        <td colspan="5">No Data found</td>
      </tr>
    </tbody>
  </table>
</body>

Answer 2

将 search.length 替换为 (employee |filter:search).length == 0 。

<tr ng-show="search.length == 0" >
  <td  colspan="5">No Data found</td>
</tr>

将以上内容替换为：

<tr ng-show="(employee |filter:search).length == 0" >
  <td  colspan="5">No Data found</td>
</tr>

显示在angularjs过滤器中找到的NO数据

2 个答案: