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

Question

我正在使用AngularJS和转发器来迭代一些结果.还有一个应用于搜索的过滤器.

有两个条件我希望能够处理并且正在寻找最"有棱角"的方式.

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

第二个条件是,如果使用过滤器,则不会返回任何结果.

我看到了这个,看起来它已经足够了,我可以为每个条件创建一个.但是,无论如何都有原生角度指令来处理这些条件,而不需要控制器中的代码？

谢谢!

Answer 1

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

jsFiddle.

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

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

Answer 2

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

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

朋友是JSON对象.