Найдите прилагаемую скрипку, где я хочу опубликовать предупреждающее сообщение «Нет данных для отображения», если фильтр не соответствует каким-либо результатам при нажатии кнопки.

Fiddle ng-repeat filter

Я дал условие для таблицы и сообщения, чтобы они отображались как и когда происходят клики.

<div ng-show="name===null">No results</div>

Приведенное выше сообщение должно отображаться, если в таблице нет удовлетворительных данных, основанных на щелчках по ссылкам, вместе таблицу следует скрыть. Я пытался дать условия, основанные на свойстве name, но оно не работает.

0
forgottofly 10 Янв 2017 в 07:58

3 ответа

Лучший ответ

Проверьте свою скрипку http://jsfiddle.net/w0L4o8jm/6/

По умолчанию я делаю фильтр с Fruit. Вы можете изменить это в контроллере.

Приходя к ответу, рассчитайте длину отфильтрованных элементов в соответствии с фильтром. Если длина 0 или имя '', то показать no results. В противном случае показать результаты в таблице. Просто скопируйте и вставьте приведенный ниже код в вашу скрипку и проверьте его.

<html ng-app="app">
            <a ng-click="name = 'Fruit'">Fruit</a>
             <a ng-click="name = 'Nut'">Nut</a>
             <a ng-click="name = 'Seed'">Seed</a>



<body ng-controller="main">
    <a ng-click="name = ''">clear filter</a>
    <br>   <br>   <br>
    <div ng-show="(name=='' || !filtered.length)">No results</div>
    <div ng-repeat="link in filtered = (links|filter:name)"></div>
    <table class="table" ng-show="(filtered.length != 0 && name!='')">
            <thead>
                            <tr>
                                <th>Target</th>
                                <th>Level</th>
                                <tr>
                                     <tbody>
                            <tr ng-repeat="link in links|filter:name">
                                <td>
                                {{link.name}}
                                </td>
                                    <td>
                                {{link.category}}
                                </td>
                                </tr>
                                </tbody>

    </table>        

</body>

Код контроллера

Var app = angular.module ('app', []);

app.controller('main', function($scope) {
    $scope.filters = { };
    $scope.name='Fruit';
    $scope.links = [
        {name: 'Apple', category: 'Fruit'},
        {name: 'Pear', category: 'Fruit'},
        {name: 'Almond', category: 'Nut'},
        {name: 'Mango', category: 'Fruit'},
        {name: 'Cashew', category: 'Nut'}
    ];
});

Для угловых версий до 1,3

Присвойте результаты новой переменной (например, отфильтрованной) и получите к ней доступ:

<div ng-repeat="link in filtered = (links|filter:name)"></div>

Для угловых 1,3 +

Используйте псевдоним (Docs: Angular 1.3.0: ngRepeat, прокрутите вниз до раздела «Аргументы»):

<div ng-repeat="link in links|filter:name as filtered"></div>
1
Mr_Perfect 10 Янв 2017 в 05:50

Попробуйте использовать этот код

демонстрация

    <body  ng-app="app" ng-controller="main">
    <a ng-click="name = 'Fruit'">Fruit</a>
     <a ng-click="name = 'Nut'">Nut</a>
     <a ng-click="name = 'Seed'">Seed</a>
      <a ng-click="name = ''">clear filter</a>
       <br>   <br>   <br>
  <div ng-show="name ==''">No results</div>

<table class="table" ng-show="name!=''">
        <thead>
                        <tr>
                            <th>Target</th>
                            <th>Level</th>
                            <tr>
                                 <tbody>
                        <tr ng-repeat="link in links | filter:name">
                            <td>
                            {{link.name}}
                            </td>
                                <td>
                            {{link.category}}
                            </td>
                            </tr>
                            </tbody>

  </table>        
var app = angular.module('app', []);

app.controller('main', function($scope) {
    $scope.filters = { };
    $scope.name = '';
    $scope.links = [
        {name: 'Apple', category: 'Fruit'},
        {name: 'Pear', category: 'Fruit'},
        {name: 'Almond', category: 'Nut'},
        {name: 'Mango', category: 'Fruit'},
        {name: 'Cashew', category: 'Nut'}
    ];
});
1
Ramesh Rajendran 10 Янв 2017 в 05:33

Ну вот! Обновленная скрипта

У вас там было несколько проблем:

  • ваш ng-controller был на div, но вы устанавливали name вне контроллера
  • <div ng-show="name===null">No results</div> Здесь вы сравнивали name с null, но вы устанавливали пустую строку в clear filter

Надеюсь, это поможет!

Изменить . На clear filter не отображались все элементы. Исправлена и обновлена скрипка

1
tanmay 10 Янв 2017 в 05:54