Настройка функции углового фильтра

0

Я борюсь с написанием простой логики. Пожалуйста, посмотрите, можете ли вы мне помочь.

У меня есть следующий код, который отображает три таблицы в пользовательском интерфейсе в настоящий момент на основе данных im, возвращающихся с сервера.

У меня есть окно поиска, которое фильтрует данные в каждой таблице. Он также отлично работает.

Мое требование: мне нужно показать одно общее сообщение "Нет данных", если данные не найдены во всех трех таблицах на основе ввода.

<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

Вы можете использовать ngIf/ngShow/ngHide/ngClass для этого, но вам нужно немного изменить способ написания повтора. Например, вы можете написать это следующим образом:

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

Вы также можете сделать:

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

Итак, теперь у вас есть ссылка на filterData, и вы можете просто использовать filterData.length в своем ngShow/Hide/If/Class в качестве логического. Если длина равна 0, она будет ложной:

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

Здесь рабочая демонстрация, которая, я думаю, соответствует вашим требованиям, насколько я могу судить. Обратите внимание, что я переместил фильтр на первый вложенный повтор, чтобы таблицы были полностью скрыты, если они не совпали, и у вас есть только одно сообщение "Нет данных".

Обновленный Plunker

  • 0
    это нормально, но проблема в том, что он показывает повторяющиеся сообщения. Если вы видите в моем коде, у меня есть внешний ng-repeat <div ng-repeat = "student in studentPermissions.entities">, который создает несколько таблиц. Итак, <p ng-hide = "FilterData.length"> Данные не найдены </ p> повторяется для каждой итерации externalloop. ты понял мою точку зрения? Принимая во внимание, что мне нужно отображать сообщение только один раз, если данные не найдены в каждой таблице.
  • 0
    Я думаю, что вы упускаете суть. Вам не нужно использовать отфильтрованные данные внутри повтора. Это как любая другая переменная. Вы можете использовать его там, где хотите на странице. Если вы хотите скрыть всю таблицу, когда результаты пусты, не проблема, просто добавьте ng-hide в таблицу или добавьте класс с помощью ngClass. Сделаю пример для вас.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню