Я борюсь с написанием простой логики. Пожалуйста, посмотрите, можете ли вы мне помочь.
У меня есть следующий код, который отображает три таблицы в пользовательском интерфейсе в настоящий момент на основе данных 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}]}]}]},
]
Вы можете использовать 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>
Здесь рабочая демонстрация, которая, я думаю, соответствует вашим требованиям, насколько я могу судить. Обратите внимание, что я переместил фильтр на первый вложенный повтор, чтобы таблицы были полностью скрыты, если они не совпали, и у вас есть только одно сообщение "Нет данных".