I am currently working on a list (<ul>), which is being used in multiple instances within different ng-repeat iterations on the same page.
The initial list items are generated through ng-repeat, with the second to last item containing a span. When this span is clicked, it should reveal the final list item (which is initially hidden).
<ul ng-repeat="list in lists">
<li ng-repeat="item in getItems(a,b)">{{item}}
</li>
<li>
<span style="cursor:pointer;" ng-click="display_item_form($event)" class="glyphicon glyphicon-plus"></span>
</li>
<li style="display: none;" class="item-form">
content that will be displayed when the 'button' is pressed
</li>
</ul>
While attempting different methods like passing $event and 'this', I have found that the outcome is always undefined or an exception.
$scope.display_item_form = function($event){
// alert($(it).parent().siblings('.item-form').attr('type'));//passing this instead of $event: result: undefined
alert($($event.target).attr('type')); //undefined
// $(it).parent().parent().children('.item-form').show();
// $('.item-form').show(); // this works, but i only want .item-form inside the current <ul> to be shown
}