AngularJS: get siblings when using ng-click

Question

I'm working on a list(<ul>), that is used multiple times inside different ng-repeat-iterations on one page.

The first list-items are generated by ng-repeat, the (second-)last list-item contains a span, which when clicked on, should cause the last list-item(hidden on page load) to show

                  <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 to be shown on 'button' press
                    </li>
                  </ul>

Apart from passing $event, i tried passing 'this', but the result 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

    }

Seems like using a controller variable to controller this and then ng-if="variable==true" and setting the variable from ng-click would be the way to go. If you need to re-use it, move it to a directive or component. — Mike Feltman
– Mike Feltman, Commented Aug 1, 2017 at 14:24
try prop('type') instead of attr('type') because there is no type attribute set — Martin Godzina
– Martin Godzina, Commented Aug 1, 2017 at 14:26
getItems() just returns an array of list-items, there is no relation to the last 2 list-items apart from their parents, prop('type') is still undefined, i will now look into components(directives) since i dont have too much experience with angular — tzimme
– tzimme, Commented Aug 1, 2017 at 14:34
@tzimme I was just using it to build my response correctly. In my answer below I just made a generic array that you can replace with your actual getItems function. — kauffmanes
– kauffmanes, Commented Aug 1, 2017 at 14:41

Francis Leigh · Accepted Answer · 2017-08-01 14:44:25Z

1

You could try creating a variable on $scope upon load and reference in the last li's ng-if statement.

Take note that : ng-if removes the conditioned element from the DOM. ng-show applies display: none; to the conditioned element in the DOM.

this is important to remember in case you are needing to re-initialise any child components that may be inside the conditioned element.

Hope this helps! :-)

<ul>
  <li ng-repeat="item in getItems(a,b)">{{item}}</li>
  
  <li>
    <span ng-click="$scope.showContent = true"></span>
  </li>
  
  <li ng-if="$scope.showContent">
    content to be shown on 'button' press
  </li>
</ul>

answered Aug 1, 2017 at 14:44

Francis Leigh

2,01014 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tzimme Over a year ago

unless there is a way to dynamically assign $scope.showContent to the current ul i guess this also effects all lists' 'last' items on the page

Francis Leigh Over a year ago

Are you not just wanting to show the last static li ?

kauffmanes · Accepted Answer · 2017-08-01 15:02:34Z

1

You could do something like this entirely in the HTML.

showItem isn't defined at first, so it won't show. Once you click the button, you toggle the button (sets it to true in this case), and it displays.

var app = angular.module("app", []);

app.controller("TestCtrl", ['$scope', function ($scope) {
   
  $scope.list = [{ val: 1 },{ val: 2 },{ val: 3 },{ val: 4 },{ val: 5 }];

$scope.list2 = [{ val: 1 },{ val: 2 },{ val: 3 },{ val: 4 },{ val: 5 }];
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">

<div data-ng-controller="TestCtrl">
    <ul>
        <li ng-repeat="item in list">{{item.val}} </li>
        <li data-ng-click="showList1Item=!showList1Item"><span style="cursor:pointer;">+</span></li>
        <li data-ng-show="showList1Item">last item</li>
    </ul>

    <ul data-ng-controller="TestCtrl">
        <li ng-repeat="item in list2">{{item.val}} </li>
        <li data-ng-click="showList2Item=!showList2Item"><span style="cursor:pointer;">+</span></li>
        <li data-ng-show="showList2Item">last item</li>
      </ul>
    </div>
</div>

edited Aug 1, 2017 at 15:02

answered Aug 1, 2017 at 14:35

kauffmanes

51810 silver badges29 bronze badges

6 Comments

tzimme Over a year ago

although i like it, the problem with this solution are the multiple occurences of the list, it makes all 'last' items on the page show

kauffmanes Over a year ago

You can have a different variable showItem for different lists. Like showTest1Item, showTest2Item.

tzimme Over a year ago

it's only this one list, being created dynamically when needed inside multiple nested ng-repeat

kauffmanes Over a year ago

The last item that you want to display... is it part of the original loop? Or could it be? You could always loop through a list of everything except the last one, and then when you click, finish looping.

tzimme Over a year ago

no, first: items from the loop are displayed. then: when clicking on + additional, but not related information is shown as well as some inputs

|

tzimme · Accepted Answer · 2017-08-04 17:01:39Z

-1

I found a solution:

angular.element();

$scope.display_item_form = function($evt){
    var ele = angular.element($evt.target);
    ele.parent().parent().find('.item-form').show();
}

edited Aug 4, 2017 at 17:01

answered Aug 2, 2017 at 8:39

tzimme

4515 bronze badges

Collectives™ on Stack Overflow

AngularJS: get siblings when using ng-click

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related