単一のアイテムをリストの一番上に移動します

ジェフ・アンセル

ulまたはdivのセット内のアイテムの任意のリストが与えられた場合、角度のある方法を使用して、選択したアイテムをリスト/ディスプレイの一番上に表示したいと思います。

$scope.items = [{name: "Garfield", id: 1}, {name: "Simon", id: 2}, {name: "Whatever", id: 3}]
$scope.model = {selectedItemId: 3}

ビューでは、ng-repeatを使用します

ul.items
  li.item ng-repeat="item in items" ng-class="{selected: model.selectedItemId == item.id"
    div {{item.name}}

AngularJSアプローチを使用して残りの順序をそのままにしながら、選択したアイテムをフィルター処理またはリストの一番上に並べ替えたいと思います。

キャスパーハーマー

データはすでに配列として適切にフォーマットされているため、カスタムフィルターを使用します。

Angularには多くの組み込みフィルターが用意されていますが、独自のフィルターを作成するのは非常に簡単です。私はここに例を置くつもりだったが、検索はサム・ディアリングによって作成された非常に素晴らしい例見つかっここを私は本当にに改善することができません。

アクセスを容易にするために、コードの関連部分は次のとおりです。

app.filter('currentUserToTop', function () {
    return function (users, current) {
        var newList = [];
        angular.forEach(users, function (u) {
            if (u.id == current) {
                newList.unshift(u);
            }
            else {
                newList.push(u);
            }
        });
        return newList;
    };
});

ここでは、この例に関連したフィドルです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

選択したアイテムを移動してリストの一番上に移動する方法

分類Dev

Redisはアイテムをリストの中央から一番上に移動します

分類Dev

JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

分類Dev

JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

分類Dev

(Eclipse)アイテムをlistveiwの一番上に移動します

分類Dev

AngularJSはng-focusを使用してリストアイテムをリストの一番上に移動します

分類Dev

jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

分類Dev

クリックするとアイテムを削除し、それらのアイテムをリストの一番下に移動します

分類Dev

jQueryを使用して、特定のクラスを持つ順序付きリストアイテムをリストの一番上に移動する方法

分類Dev

appendToを使用してリストアイテムを一番下に移動します

分類Dev

RecyclerViewをクリックしたアイテムを一番上に移動します

分類Dev

Flutter-選択したアイテムがListViewの一番上に移動します

分類Dev

テキストエディットのスクロールバーを一番上に移動します

分類Dev

アイテムがリストの一番下に移動したことをユーザーに表示する

分類Dev

cssで一番上の行をテキストの一番下に移動する方法

分類Dev

Pythonクラッシュコース、第2版。横向きのシューティングゲーム。エイリアンは、一番上の行が一番下に当たるまで下に移動し続けます

分類Dev

ツールバーを相対レイアウトの一番上に移動します

分類Dev

Android:配列リストの一番上にアイテムを追加

分類Dev

Android:配列リストの一番上にアイテムを追加

分類Dev

FABをレイアウトの一番上に移動する方法

分類Dev

MSAccess-複数選択リストボックスをクリアし、一番上の行に移動し、選択を解除します

分類Dev

Jqueryはテーブルの行を一番上に移動します

分類Dev

データベースからコンポーネントの状態でリストの一番上に新しいアイテムを追加します

分類Dev

EditTextがレイアウトの一番下に移動します

分類Dev

新しいアイテムを追加すると、RecyclerViewスクロールがリストの一番上に戻ります

分類Dev

Cssグリッドアイテムはスクロールの一番上に固執します

分類Dev

動的に作成されたタグをselect2のリストの一番下に移動します

分類Dev

PLACEHOLDERテキストを一番上に移動する方法

分類Dev

フラグメントをスタックの一番上に移動します

Related 関連記事

  1. 1

    選択したアイテムを移動してリストの一番上に移動する方法

  2. 2

    Redisはアイテムをリストの中央から一番上に移動します

  3. 3

    JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

  4. 4

    JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

  5. 5

    (Eclipse)アイテムをlistveiwの一番上に移動します

  6. 6

    AngularJSはng-focusを使用してリストアイテムをリストの一番上に移動します

  7. 7

    jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

  8. 8

    クリックするとアイテムを削除し、それらのアイテムをリストの一番下に移動します

  9. 9

    jQueryを使用して、特定のクラスを持つ順序付きリストアイテムをリストの一番上に移動する方法

  10. 10

    appendToを使用してリストアイテムを一番下に移動します

  11. 11

    RecyclerViewをクリックしたアイテムを一番上に移動します

  12. 12

    Flutter-選択したアイテムがListViewの一番上に移動します

  13. 13

    テキストエディットのスクロールバーを一番上に移動します

  14. 14

    アイテムがリストの一番下に移動したことをユーザーに表示する

  15. 15

    cssで一番上の行をテキストの一番下に移動する方法

  16. 16

    Pythonクラッシュコース、第2版。横向きのシューティングゲーム。エイリアンは、一番上の行が一番下に当たるまで下に移動し続けます

  17. 17

    ツールバーを相対レイアウトの一番上に移動します

  18. 18

    Android:配列リストの一番上にアイテムを追加

  19. 19

    Android:配列リストの一番上にアイテムを追加

  20. 20

    FABをレイアウトの一番上に移動する方法

  21. 21

    MSAccess-複数選択リストボックスをクリアし、一番上の行に移動し、選択を解除します

  22. 22

    Jqueryはテーブルの行を一番上に移動します

  23. 23

    データベースからコンポーネントの状態でリストの一番上に新しいアイテムを追加します

  24. 24

    EditTextがレイアウトの一番下に移動します

  25. 25

    新しいアイテムを追加すると、RecyclerViewスクロールがリストの一番上に戻ります

  26. 26

    Cssグリッドアイテムはスクロールの一番上に固執します

  27. 27

    動的に作成されたタグをselect2のリストの一番下に移動します

  28. 28

    PLACEHOLDERテキストを一番上に移動する方法

  29. 29

    フラグメントをスタックの一番上に移動します

ホットタグ

アーカイブ