如何在Django for循環中顯示/隱藏特定元素

Question

嗨，我正在使用AngularJS在Django支持的網站上工作。 我有Django模板如下

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

和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 %}

在這里試圖實現的是，只要用戶單擊表隱藏中的按鈕，反之亦然。 但是按照代碼，當用戶單擊按鈕時，所有表（請記住將會存在多個表，因為它位於for循環中）而不是該特定表被隱藏。 無論如何，是否只隱藏該特定表？ 而不是所有表格？ 提前致謝。

Answer 1

已經有一段時間了，但是如果我沒記錯的話，您想在表中添加一個類，以將其標識為您要隱藏的類。 然后在其中有按鈕。 單擊時，您可以執行一些操作來達到element.closest的效果，從而抓住您單擊的按鈕的父表。 從那里可以調用.toggle（）如果沒有其他問題，Django使用field_name_1..2..3保持表ID的狀態，因此您可以將類分配給按鈕並獲取按鈕附帶的數字並將其用作標識符但這有點草率。

Answer 2

推薦的類似方法不是使用Django模板，而是將變量作為JSON對象傳入，並讓Angular完成所有模板。 您可以通過在Ajax上發送它們或在最簡單的情況下將它們作為Django模板上下文傳遞，然后將它們添加到頁面頂部的內聯腳本中的window對象中來實現。 然后，您可以從Angular控制器的window中訪問它們。 這兩種解決方案都將使代碼更加整潔，而第二種解決方案將比您所擁有的更多。

如果您真的想繼續前進，可以嘗試以下方法。 您的javascript變量show可能成為對象，以Django對象ID作為鍵（不確定在{% for k, m in items %}循環中到底要迭代的Django對象是什么，但是您可以使用任何唯一的他們擁有的ID。）

所以看起來像這樣：

{% 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">

和

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