javascriptjqueryangularjsangularjs-directiveng-hide

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


I am displaying a loop of items from a list in controller using ng-repeat directive. They are just the regular todo items with a minimize button. So, what I am doing to minimize the items is by setting up ng-hide to true on click of minimize button for those particular elements. Code is as below.

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

Here is how it looks like

here is how it looks like

I have shown the list in right panel using another ng-repeat where I am just showing titles of notes and a button to maximize if they are hidden (constraint is I cannot have both left and right panels in single ng-repeat). Now the problem is whenever I click minimize button, that particular item hides, But I am now unable to display it again using maximize button in right panel.

I tried creating a function in controller for ng-click of minimize button which will return true if current state of item is 'not hidden' and I have passed a variable to the same function via ng-click of maximize button setting it up as false for ng-hide. But it's not working.

I am fed up now. If you guys got the purpose, please help me achieving the same. :(

Edit: Here is right panel code

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

Solution

  • In your right panel you interator is called miniNode, but in ng-click you reference mininode.minimize.

    Changing either miniNode to mininode or vice versa should fix your problem.