angularjs - angularjsで動的オプションメニューを表示する最良の（最も効率的な）方法

Question

UI に多くの項目があるとします。ユーザーが項目をクリックすると、UI はいくつかのオプション、アクションなどを含む popup/dialiog/overlay 要素を表示する必要があります。

現在、次の 2 つのオプションがあります。

各アイテムのオーバーレイ要素を複製し、関連するアイテムがクリックされるまで非表示にします。このフィドルのように: http://jsfiddle.net/urPww/1/

<div ng-show="currentItem"> showing options for: {{currentItem.name}} </div> <li ng-repeat="item in items" ng-click="showOptions(item)"> {{item.name}} </li>
オーバーレイ UI を一度配置すると、最後にクリックされた項目を追跡できます。デモ: http://jsfiddle.net/aVnPT/5/

<li ng-repeat="item in items" ng-click="showOptions(item)"> {{item.name}} <span ng-show="item.showingOptions"> <br/>showing options for: {{item.name}} </span> </li>

最初の解決策は効率的ではありません。それでも、2番目の要素でクリックされた要素以外にオーバーレイUIを表示する方法がわかりません。何か案は？

score 0 · Accepted Answer

オプション 2は、dom 操作を使用してクリックされた要素の横にオプションオーバーレイを動的に配置するディレクティブを使用できます (@charlietfl の回答を参照)。最終的に HTML は単純になりますが、js/angular コードははるかに複雑になります。

ただし、オプション1は正しい考えであり、少しクリーンアップできると思います. ディレクティブを削除して、コントローラーメソッドを次のように単純にすることができます。

$scope.showOptions = function(item) {
    $scope.currentItem = item;
}

ここを参照してください：

コントローラーが大幅に簡素化され、カスタムディレクティブが不要になる場合は、ビュー/テンプレートに (最小限の) 重複を喜んで追加します。

2 に答える 2