0

ng-repeat ディレクティブを使用して、コントローラーのリストからアイテムのループを表示しています。これらは、最小化ボタンが付いた通常の todo アイテムです。したがって、アイテムを最小化するために私が行っているのは、それらの特定の要素の最小化ボタンをクリックしたときに ng-hide を true に設定することです。コードは以下の通りです。

<div ng-repeat="note in notesList">
  <div class="col-md-3 single-note" style="margin:5px" ng-hide="note.minimize">
    <div class="note-title" style="margin-left: 30px">
      <i class="fa fa-2x fa-paperclip" style="position:absolute; left:5px; top:5px"></i>
      <b ng-bind="note.title"></b>
    </div>
    <div class="description" style="margin-left: 30px; text-align: justify" ng-bind="note.description"></div>
    <div class="note-footer" style="margin-left: 30px; margin-bottom: 2px">
      <span>
        <img ng-src="{{ note.priority == 'imp' && 'img/imp.png' || ( note.priority == 'trivial' && 'img/trivial.png' || 'img/critical.png' )}}" /><!--<i class="fa fa-2x fa-dot-circle-o"></i>--></span>
        <div class="pull-right">
          <button class="btn btn-sm btn-default minimize" style="border-radius: 100%" ng-click="note.minimize=true"><i class="fa fa-minus"></i></button>
          <button class="btn btn-sm btn-default" style="border-radius: 100%" data-toggle='modal' data-target='#editNoteModal' ng-click="editNote(note.id)"><i class="fa fa-pencil"></i></button>
          <button class="btn btn-sm btn-default" style="border-radius: 100%" ng-click="removeNote(note.id)"><i class="fa fa-trash-o"></i></button>
        </div>
      </span>
    </div>
  </div>
</div>

これがどのように見えるかです

これがどのように見えるかです

別の ng-repeat を使用して右側のパネルにリストを表示しました。ここでは、メモのタイトルと、それらが非表示の場合は最大化するボタンを表示するだけです (制約は、単一の ng-repeat で左側と右側の両方のパネルを使用できないことです)。問題は、最小化ボタンをクリックするたびにその特定のアイテムが非表示になることですが、右側のパネルの最大化ボタンを使用して再度表示することができなくなりました。

アイテムの現在の状態が「非表示でない」場合に true を返す最小化ボタンの ng-click 用のコントローラーで関数を作成しようとしました。最大化ボタンの ng-click を介して同じ関数に変数を渡し、false として設定しました。 ng-hide用。しかし、それは機能していません。

私は今うんざりしています。皆さんが目的を達成した場合は、同じことを達成するのを手伝ってください。:(

編集：これが右側のパネルコードです

<!--Right Panel (TAKEN FIRST AND PULLED TO RIGHT IN ORDER TO MAINTAIN UPPER POSITOIN IN MOBILE RESPONSIVENESS)-->
    <div class="col-md-3 right-panel pull-right">
        <div id="critical-notes-bunch">
            <br/>
            <div class="alert alert-danger"><i class="fa fa-dot-circle-o"></i> Critical Notes</div>
            <ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
                <li ng-repeat="miniNote in notesList">
                    <a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span><a href="" class="pull-right">&times;</a>
                </li>
                <a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
            </ul>
        </div>
        <div id="critical-notes-bunch">
            <div class="alert alert-warning"><i class="fa fa-dot-circle-o"></i> Important Notes</div>
            <ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
                <li ng-repeat="miniNote in notesList">
                    <a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span><a href="" class="pull-right">&times;</a>
                </li>
                <a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
            </ul>
        </div>
        <div id="critical-notes-bunch">
            <div class="alert alert-success"><i class="fa fa-dot-circle-o"></i> Trivial Notes</div>
            <ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
                <li ng-repeat="miniNote in notesList">
                    <a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span><a href="" class="pull-right">&times;</a>
                </li>
                <a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
            </ul>
        </div>
    </div>
    <!--/Right Panel-->
4

2 に答える 2

1

右側のパネルでは、interator が呼び出さminiNodeれていますが、ng-click参照していますmininode.minimize。

に変更するかminiNode、mininodeその逆に変更すると、問題が解決するはずです。

于 2015-05-04T13:34:07.323 に答える
1

ng-repeat右側のリストをレンダリングするために使用する。単純にできませんか

<div ng-repeat="note in notesList">
    <span ng-click="note.minimize = false">Maximize</span>
    ...
</div>
于 2015-05-04T12:48:39.523 に答える