更新了Plunker

Question

我正在努力编写简单的逻辑。请看看你是否可以帮助我。

我有以下代码，根据从服务器返回的数据，在UI上显示三个表。

我有搜索框，用于过滤每个表格中的数据。它也工作正常。

我的要求： 当根据输入在所有三个表中找不到数据时，我需要显示一条通用消息“No data found”。

<div>
 <input type="text" ng-model="searchStudent">
<div>
    <div ng-repeat="studentPermissions in studentPermissions">
        <div ng-repeat="student in studentPermissions.entities">
            <table>
                <thead>
                    <tr>
                        <td >Student</td>
                        <td>{{student.StudentName}}</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th ng-repeat="permission in student.entityStudents[0].userPermissions"><div><span>{{permission.Name}}</span></div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="student in student.entityStudents | filter:searchStudent">
                        <td>{{student.FirstName}} {{student.LastName}}</td>
                        <td ng-repeat="permission in student.userPermissions">
                            <input ng-model="permission.Checked" type="checkbox">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

我在控制器中编写了search方法。

    $scope.search = function (item) {
        if ($scope.searchUser == null || $scope.searchStudent.trim() == "")
            return true;
        if (item.FirstName.toLowerCase().indexOf($scope.searchStudent.toLowerCase()) != -1 || item.LastName.toLowerCase().indexOf($scope.searchStudent.toLowerCase()) != -1 || item.Role.toLowerCase().indexOf($scope.searchStudent.toLowerCase()) != -1) {
            return true;
        }
        return false;
    };

我尝试设置开启/关闭标记但每次都出错了。

我的样本数据：

$scope.studentPermissions  = [ 
{entities[{StudentName: 'Tester', entityStudents[{FirstName: 'Test0', LastName: 'Test0', userPermissions[{prop 1, prop2, prop3}]}]}]},
{entities[{StudentName: 'Tester', entityStudents[{FirstName: 'Test1', LastName: 'Test2', userPermissions[{prop 1, prop2, prop3}]}]}]},
{entities[{StudentName: 'Tester', entityStudents[{FirstName: 'Test3', LastName: 'Test4', userPermissions[{prop 1, prop2, prop3}]}]}]},
]

Answer 1

您可以使用ngIf / ngShow / ngHide / ngClass，但您必须稍微改变编写重复的方式。例如，您可以这样写：

ng-repeat="student in filteredData = (student.entityStudents | filter:searchStudent)">

你也可以这样做：

ng-repeat="student in student.entityStudents | filter:searchStudent as filteredData"

所以，现在你有了一个对filteredData的引用，你可以在ngShow / Hide / If / Class中使用filteredData.length作为布尔值。如果它的长度为0，那将是假的：

<p ng-hide="filteredData.length">No Data Found</p>

这是一个工作演示，我认为这符合您的要求，我能说得最好。请注意，我将您的过滤器移动到第一个嵌套重复，以便在表格不匹配时完全隐藏这些表格，并且您只有一个“找不到数据”消息。

自定义角度过滤功能

1 个答案:

更新了Plunker