Question

如果过滤器符合按钮点击中的任何结果，请找到我想发布警告标语“无数据显示”的小提琴。

我已经为表格和消息提供了条件，以便在点击发生时显示它们。

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

如果基于链接点击的表格中没有令人满意的数据，则应显示上述消息，同时应隐藏表格。我尝试根据属性name给出条件，但它不起作用。

Answer 1

你走了！ Updated fiddle

你有几个问题：

您的ng-controller位于div，但您在控制器外设置name
<div ng-show="name===null">No results</div>您在name与null进行比较，但您在clear filter

希望它有所帮助！

修改：在clear filter上，它没有显示所有项目。固定和更新小提琴

Answer 2

尝试使用此代码

Demo

    <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'}
    ];
});

Answer 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之前的Angular

将结果分配给新变量（例如已过滤）并访问它：

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

适用于Angular 1.3 +

使用别名表达式（文档：Angular 1.3.0：ngRepeat，向下滚动到Arguments部分）：

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

根据过滤后的输出ng-repeat显示/隐藏警告消息

3 个答案: