当物体在直放站空AngularJS显示信息 [英] AngularJS display message when object is empty in repeater

问题描述

我使用AngularJS和中继通过一些结果进行迭代。还有施加用于搜索过滤器。

I'm using AngularJS and the repeater to iterate through some results. There's also a filter applied for searching.

还有，我会希望能够处理和正在寻找最角的方式两个条件。

There's two conditions that I would want to be able to handle and am looking for the most "angular" way.

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

The first condition is if there are no results to begin with.

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

The second condition is if when using the filter, there are no results returned.

我看了<一个href=\"http://stackoverflow.com/questions/13845409/angularjs-default-text-for-empty-ng-repeat-on-javascript-object\">this,这似乎是这将是足够的，我可以创建一个针对每个条件。不过，反正是有原生角的指令来处理这些情况，而不需要code控制器？

I saw this, which seems like it would be adequate and I could create one for each condition. However, is there anyway with native angular directives to handle these conditions, without requiring code in the controller?

谢谢！

推荐答案

您可以过滤阵列上添加ngSwitch指令，并取决于它的长度显示不同的HTML。

You can add ngSwitch directive on filtered array and display different HTML depending on it's length.

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

另一种选择是直接在控制器上的朋友阵列应用$过滤器（过滤器），这将缩短HTML标记。

Another option is to apply $filter("filter") on friends array directly in controller, which will shorten HTML markup.

这篇关于当物体在直放站空AngularJS显示信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！