[Answered ]-How to ng-show/hide specific elements inside a django for loop

by

1👍

✅

The recommended way of doing something like this is not to use Django templating, but to pass in your variables as JSON objects and let Angular do all the templating. You can do that by sending them over Ajax or in the simplest case by just passing them in as Django template context and then adding them to the window object in an inline script at the top of your page. You can then access them from window in your Angular controller. Both of these solutions will result in much neater code, and the second one will be no more effort to implement than what you have.

If you really want to continue down the path you’re on, you could try the following. Your javascript variable show could become an Object, with your Django object ids as keys (not sure exactly what the Django objects are you’re iterating through in your {% for k, m in items %} loop, but you could use any unique id they have.)

So it would look something like this:

{% for k, m in items %}
    <table ng-show="show[{{ k }}]" class="table table-bordered tbl" ng-cloak>
        <tr align="left">
            <span>
                <button ng-click="show[{{ k }}] =! show[{{ k }}]" class="btn btn-default drop">

and

app.controller('MyCtrl', function($scope) {
   $scope.show = {};
});
👤ChidG

1👍

It’s been a while but if I remember correctly you’ll want to add a class to your table to identify it as the one you’re wanting to hide. Then within there you have the button. On click you do something to the effect of element.closest grabbing the parent table of the button you clicked. From there you can call .toggle() If nothing else, Django keeps state of table ids using the field_name_1..2..3 so you could assign the class to the button and grab the number attached to it and use that as the identifier but that’s kind of sloppy.

👤Obj3ctiv3_C_88

Leave a comment