如何在Django for循环中显示/隐藏特定元素

Question

Hi am working on a Django powered website with some AngularJS. I have django template as follows

<div ng-app="MyApp" ng-controller="MyCtrl">
    <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
    <div class="well ">
        {% for k, m in items %}
            <table ng-show="show" class="table table-bordered tbl" ng-cloak>
              <tr align="left">
                <span>
                    <button ng-click="show=!show" class="btn btn-default drop">
              ..............

and angularjs

{% block extra_js %}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.show = false;
});
</script>
{% endblock extra_js %}

What am trying achieve here is whenever the user click on the button inside the the table hides or vice versa. But as per the code when the user click the button all the tables (remember there will be multiple tables since its inside a for loop) are hiding instead of that particular table. Is there anyway to hide only that particular table? instead of all the tables? Thanks in advance.

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

Answer 2

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 = {};
});