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
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">×</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">×</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">×</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-->
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.