javascript - 结合 ng repeat 和 django 模板语言

Question

我有一个表，随着时间的推移会有不同的列，我希望我的 Django View 支持那些不断变化的列。我还想使用 ng-repeat 来做一些花哨的事情，比如过滤和其他事情。但是我无法将两者结合起来。

我正在使用 django 模板语言传入任意 col_names。 packages 也与 django 模板语言一起发送，本质上是一个 json 数组，其中每一行都是一个 dict 将 col_name 映射到某个值。即

$scope.packages = [{'col1': 'row1col1', 'col2': 'row2val2'}, {'col1': 'row2col1' .... 

但是，当我使用 packages 放入行时，我无法“嵌套”我的模板。有没有办法从“包”中的每一行中获取任意值？

<input ng-model="search" placeholder="Search">
        <table style="width:100%;">
            <thead>
                <tr>
                    <th>Permanent Column 1</th>
                    <th>Permanent Column 2</th>
                    {# changing columns #}
                    {% for col_name in col_names %}
                        <th>{{ col_name }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="package in packages | filter:searchPackage">
                    {% for col_name in columns %}
                        <td>{{package.{{ col_name }}}}</td>  DOESN'T WORK!
                    {% endfor %}
                </tr>
            </tbody>
        </table>

在那个问题行中，我基本上想要 {{package.ACTUAL_ARBITRARY_COL_NAME}} 但我不知道如何以编程方式做到这一点

Answer 1

问题

默认情况下，Django 和 AngularJS 使用相同的标记 {{ 和 }} 进行模板化。

所以这首先由 Django 模板处理

{% for col_name in columns %}
    <td>{{package.{{ col_name }}}}</td>  DOESN'T WORK!
        ^                        ^
        |________________________| 
         Django template will try to process this value

因为 Django 试图扩展第一个 {{...}} 中的内容，所以您不会得到您希望 AngularJS 看到的内容。

If you want to continue down that road, I suggest you read some solutions to this problem here

更好的解决方案

更好的方法是为 AngularJS 提供您希望 Django 为您循环的项目。

$scope.columns = [...];

Then use AngularJS to do all the loops .无论采用哪种方式，如果您需要在 AngularJS 中完成，最好全部在 AngularJS 中完成，而不是一半 Django 一半 AngularJS。