8

AngularJS とリピーターを使用して、いくつかの結果を繰り返し処理しています。検索用に適用されるフィルターもあります。

私が処理できるようにしたい2つの条件があり、最も「角度のある」方法を探しています。

最初の条件は、そもそも結果がない場合です。

2 番目の条件は、フィルターを使用するときに結果が返されない場合です。

これで十分だと思われ、条件ごとに作成できました。ただし、コントローラーにコードを必要とせずに、これらの条件を処理するためのネイティブ角度ディレクティブがとにかくありますか?

ありがとう！

4

3 に答える 3

12

フィルタリングされた配列に 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'
}];
}

もう 1 つのオプションは、コントローラーの friends 配列に $filter("filter") を直接適用することです。これにより、HTML マークアップが短縮されます。

于 2013-04-14T03:35:34.370 に答える