Question

我无法在正文的html中的表格中输入列表。这个列表使用了Angularjs，django的ajax请求。传入列表包含其中的其他列表，每个查询的大小可能不同。示例：[["a","b","c"],["a","b","c"],["a","b","c"]] or [["a","b","c","d","e"],["a","b","c","d","e"],["a","b","c","d","e"]]

档案 dfp_consulta.js

function ListDropdown($scope, $http) {
    $scope.bvmf = {ccvms : [ '1023', '10456', '10472'],
                   consolidados : [ 't', 'f' ],
                   origens : [ 'ITR', 'DFP' ],
                   balancos : [ '1', '2', '3', '4'],
                   periodos : [ '1-3', '1-6', '1-9', '1-12' ],
                   anos : [ '1997', '1998', '1999', '2012' ]
    $scope.range=[]
    $scope.send=function(ccvm, consolidado, origem, balanco, periodo, ano, ano_doc){
    $http({
        method:'POST',
        url:'/sending/',
        data:ccvm+consolidado+origem+balanco+periodo+ano+ano_doc,
        headers:{'Content-Type': 'application/x-www-form-urlencoded'},
    }).success(function(c){
            $scope.range=c
        })
    }
 }

档案 dfp_consulta.html

 {% extends "base.html" %}

 {% block corpo %}
<div ng-app="" ng-controller="ListDropdown">
    <select ng-model="ccvm" ng-options="ccvm as ccvm for ccvm in bvmf.ccvms"></select><br>
    <select ng-model="consolidado" ng-disabled="!ccvm" ng-options="consolidado for consolidado in bvmf.consolidados" ></select><br>
    <select ng-model="origem" ng-disabled="!consolidado" ng-options="origem for origem in bvmf.origens" ></select><br>
    <select ng-model="balanco" ng-disabled="!origem" ng-options="balanco for balanco in bvmf.balancos" ></select><br>
    <select ng-model="periodo" ng-disabled="!balanco" ng-options="periodo for periodo in bvmf.periodos" ></select><br>
    <select ng-model="ano" ng-disabled="!periodo" ng-options="ano for ano in bvmf.anos" ></select><br>
    <select ng-model="ano_doc" ng-disabled="!ano" ng-options="ano_doc for ano_doc in bvmf.anos" ng-change="send(ccvm,consolidado,origem,balanco,periodo,ano,ano_doc)"></select><br>

    <table class='table table-hover'>
    {% for i in range %}
        <tr>
        {% for s in i %}
            <td>{{ s }}</td>
        {% endfor %}    
        </tr>   
    {% endfor %}
    </table>
</div>
{% endblock %}

我进入$ scope.range，例如，以下列表[["a", "b", "c"] ["a", "b", "c"] ["a", "b "," c "]]，但{% for i in range %}未使用范围数组

Answer 1

问题是Django和AngularJS共享相同的Jinja2语法，用于模板中的变量替换。

最简单的选择是告诉Django不要在需要使用angularjs变量替换的地方使用它的语法 - 换句话说，使用verbatim标记：

{% block corpo %}
   {% verbatim %}
   <div ng-app="" ng-controller="ListDropdown">
       <select ng-model="ccvm" ng-options="ccvm as ccvm for ccvm in bvmf.ccvms"></select><br>
       <select ng-model="consolidado" ng-disabled="!ccvm" ng-options="consolidado for consolidado in bvmf.consolidados" ></select><br>
       <select ng-model="origem" ng-disabled="!consolidado" ng-options="origem for origem in bvmf.origens" ></select><br>
       <select ng-model="balanco" ng-disabled="!origem" ng-options="balanco for balanco in bvmf.balancos" ></select><br>
       <select ng-model="periodo" ng-disabled="!balanco" ng-options="periodo for periodo in bvmf.periodos" ></select><br>
       <select ng-model="ano" ng-disabled="!periodo" ng-options="ano for ano in bvmf.anos" ></select><br>
       <select ng-model="ano_doc" ng-disabled="!ano" ng-options="ano_doc for ano_doc in bvmf.anos" ng-change="send(ccvm,consolidado,origem,balanco,periodo,ano,ano_doc)"></select><br>

       <table>
           <tr ng-model="item2" ng-repeat="item2 in range">
               <td ng-repeat="item3 in item2">{{ item3 }}</td>
           </tr>    
       </table>
   </div>
   {% endverbatim %}
{% endblock %}

新表结构允许使用angularjs构建不同的行和列<tr ng-repeat>和<td ng-repeat>

另见：

Angularjs填表

1 个答案: