2

次のメニュー構造があるとします。

    <li class="dropdown"><img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" />
      <ul class="dropdown-menu pull-right" role="menu">
        <li ng-hide="user"><a ng-click="openLoginDialog()">Login</a></li>
        <li ng-show="user"><a ng-click="logout()">Logout</a></li>
      </ul>
    </li>

正しいメニューが表示されますが、ng-show/ng-hide を使用しているためuser = false;、コントローラーでプログラムによって変更すると、ログイン メニューが表示されます。なぜこれが起こっているのかはわかりますが、Angular を使用してそれを防ぐためにどのようなアプローチを取るべきかわかりません。私はng-repeatを試しました：

    <li class="dropdown"><img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" />
      <ul class="dropdown-menu pull-right" role="menu">
        <li ng-repeat="action in actions"><a ng-click="{{action.command}}">{{action.name}}</li>
      </ul>
    </li>

と：

$scope.actions = [ {
  name : "Login",
  command : "openLoginDialog()"
}, {
  name : "Logout",
  command : "logout()"
} ];

しかし、その戦略では、メニュー項目をクリックしても何も起こりません。歩行者のユースケースであると確信しているものに対する適切なAngularアプローチが何であるかはわかりません。

4

3 に答える 3

5

ng-show/hide の代わりにng-switchを使用します。ng-switch は、DOM から要素を追加/削除します。

<ul class="dropdown-menu pull-right" role="menu">
    <li ng-switch="user">
       <a ng-switch-when="true" ng-click="logout()">Logout</a>
       <a ng-switch-default     ng-click="openLoginDialog()">Login</a>
    </li>
</ul>

@andyczerwonka のコメントを処理するための更新。ng-switch を 1 つまたは 2 つのレベルに移動します。span内部にul問題がない場合:

<ul class="dropdown-menu pull-right" role="menu" ng-switch="user">
  <span ng-switch-when="true">
    <li><a  ng-click="logout()">Logout</a></li>
    <li><a  ng-click="preferences()">Preferences</a></li>
  </span>
  <span ng-switch-default>
    <li><a ng-click="openLoginDialog()">Login</a></li>
  </span>
</ul>

spanそれ以外の場合は、の外側はどうですかul:

<span ng-switch="user">
  <ul class="dropdown-menu pull-right" role="menu" ng-switch-when="true">
      <li><a  ng-click="logout()">Logout</a></li>
      <li><a  ng-click="preferences()">Preferences</a></li>
    </ul>
  <ul class="dropdown-menu pull-right" role="menu" ng-switch-default>
      <li><a ng-click="openLoginDialog()">Login</a></li>
  </ul>
</span>

両方の方法を示すフィドル。

于 2013-01-12T20:17:31.787 に答える
0

コマンドに機能を割り当ててみませんか。

var openLoginDialog = function() { ... };
var logout = function() { ... };

$scope.actions = [ {
  name : "Login",
  command : openLoginDialog
}, {
  name : "Logout",
  command : logout
} ];
于 2013-01-12T19:34:40.067 に答える