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

Question

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

我尝试在控制器中为 ng-click 的最小化按钮创建一个函数，如果项目的当前状态为 'not hidden'，该函数将 return 为真，并且我已将一个变量传递给同一函数通过 ng-click 的最大化按钮将其设置为 false for 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-->

Answer 1

在您用于呈现右侧列表的 ng-repeat 中；你能不能简单地做

<div ng-repeat="note in notesList">
    <span ng-click="note.minimize = false">Maximize</span>
    ...
</div>

Answer 2

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

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

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

How to Show the hidden Item in ng-repeat by external directive in AngularJS?

javascript

jquery

angularjs

angularjs-directive

ng-hide