2016-02-26 79 views
1

您好,我正在使用Django支持的一些AngularJS網站。我有Django的模板如下如何在django for循環中顯示/隱藏特定元素

<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循環會有多個表格)隱藏而不是特定的表格。無論如何只能隱藏那張特定的桌子嗎?而不是所有的表?提前致謝。

回答

1

這樣做的推薦方式不是使用Django模板,而是將您的變量作爲JSON對象傳遞並讓Angular執行所有模板。你可以通過Ajax或最簡單的方式發送它們,只需將它們作爲Django模板上下文傳遞,然後將它們添加到頁面頂部的內聯腳本中的window對象。然後您可以在Angular控制器中從window訪問它們。這兩種解決方案都會帶來更多整潔的代碼,第二種解決方案將比實現更多的努力。

如果你真的想繼續下去,你可以嘗試以下方法。你的javascript變量show可能成爲一個對象,用你的Django對象ID作爲關鍵字(不知道到底是什麼Django的對象是你迭代通過您{% for k, m in items %}循環,但是你可以使用他們有任何唯一的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 = {}; 
}); 
1

這已經有一段時間了,但如果我沒有記錯的話,你會想要在你的桌子上添加一個班級,將其識別爲你想要隱藏的班級。然後在那裏你有按鈕。在點擊時,你可以做一些事情來讓element.closest抓住你點擊的按鈕的父表。從那裏你可以調用.toggle()如果沒有其他的東西,Django使用field_name_1..2..3保持表id的狀態,這樣你就可以將類分配給按鈕並獲取附加的數字並將其用作標識符但是這是一種馬虎。

+0

@Objective:u能告訴我一個例子 – vellattukudy