javascript - 如何通过AngularJS中的外部指令显示ng-repeat中隐藏的项目？

Question

我正在使用 ng-repeat 指令显示 Controller 中列表中的项目循环。它们只是带有最小化按钮的常规待办事项。因此，我正在做的最小化项目是通过在单击这些特定元素的最小化按钮时将 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 中同时拥有左侧和右侧面板) 。现在的问题是，每当我单击最小化按钮时，该特定项目就会隐藏，但我现在无法使用右侧面板中的最大化按钮再次显示它。

我尝试在 Controller 中为最小化按钮的 ng-click 创建一个函数，如果项目的当前状态为“未隐藏”，则该函数将返回 true，并且我已通过最大化按钮的 ng-click 设置将变量传递给同一函数对于 ng-hide 来说为 false。但它不起作用。

我现在已经厌倦了。如果你们达到了目的，请帮助我实现同样的目标。 :(

编辑:这是右侧面板代码

<!--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-->

Answer 1

在右侧面板中，您的交互器称为 miniNode，但在 ng-click 中，您引用 mininode.minimize。

将 miniNode 更改为 mininode 或反之亦然应该可以解决您的问题。