javascript - 当转发器中的对象为空时，AngularJS显示消息

Question

我正在使用 AngularJS 和中继器来迭代一些结果。还有一个过滤器用于搜索。

我希望能够处理两种情况，并且正在寻找最“有角度”的方式。

第一个条件是如果没有结果开始。

第二个条件是如果在使用过滤器时，没有返回结果。

我看到了这个，这似乎就足够了，我可以为每个条件创建一个。但是，无论如何，是否有本机角度指令来处理这些条件，而不需要控制器中的代码？

谢谢！

Answer 1

您可以在过滤后的数组上添加 ngSwitch 指令，并根据其长度显示不同的 HTML。

js小提琴。

HTML：

<div ng-app ng-controller="Ctrl">
Search: <input ng-model="searchText">
<div ng-init="filtered = (friends | filter:searchText)">
    <div>{{(friends | filter:searchText).length}}</div>
    <div ng-switch="(friends | filter:searchText).length">
        <span ng-switch-when="0">Nothing was found</span>
        <table id="searchTextResults" ng-switch-default>
            <tr>
                <th>Name</th>
                <th>Phone</th>
            </tr>
            <tr ng-repeat="friend in filtered | filter:searchText">
                <td>{{friend.name}}</td>
                <td>{{friend.phone}}</td>
            </tr>
        </table>
    </div>
</div>

JS：

function Ctrl($scope) {
$scope.searchText = "";
$scope.friends = [{
    name: 'John',
    phone: '555-1276'
}, {
    name: 'Mary',
    phone: '800-BIG-MARY'
}, {
    name: 'Mike',
    phone: '555-4321'
}, {
    name: 'Adam',
    phone: '555-5678'
}, {
    name: 'Julie',
    phone: '555-8765'
}];
}

另一种选择是直接在控制器中对朋友数组应用 $filter("filter")，这将缩短 HTML 标记。

Answer 2

您可以使用此语法在未找到数据时显示消息

<p ng-show="(friends | filter:searchText).length==0">Sorry No Result Found</p>` 

Friends 是 JSON 对象。

Answer 3

ngRepeat允许您在处理完所有过滤器后为结果项目提供别名。然后，您可以使用此别名来显示您的消息。

<p ng-repeat="friend in friends | filter:searchText as displayedFriends">
    {{friend.name}}
</p>
<p ng-if="!displayedFriends.length">
    Nothing was found
</p>