自定义角度过滤功能

时间:2015-07-05 08:59:27

标签: angularjs

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

我有以下代码,根据从服务器返回的数据,在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}]}]}]},
]

1 个答案:

答案 0 :(得分:0)

您可以使用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> 

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

更新了Plunker