javascript - 当动态键值为数组时,如何使用 ng-repeat

标签 javascript angularjs angularjs-ng-repeat

在我的 Controller 中,我有这样的数据......

    data = {
        chartTypes":["pie","donut","bar","line"],
        "features":{
            "stacked": ["true","true","true","false"],
            "percentage":["false","false","true","false"]
         }
    };

$scope.docStructure = data

有什么方法可以让我使用 ng-repeat 遍历键并在值是数组时再次迭代?

<div ng-app="chartFeatures" ng-controller="chartFeaturesCtrl" style="height:200px; background:red;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>&nbsp;</th>
            <th ng-repeat="chartType in docStructure.chartTypes">{{chartType}}</th>
        </tr>
        <tr ng-repeat="(feature,supportedList) in docStructure.features">
            <td>{{feature}}</td>
            <td ng-repeat="supported in supportedList">{{supported}}</td>
        </tr>

        </table>
    </div>

我的想法是我想做一个交叉表,如下所示。

例子:

enter image description here

最佳答案

你只需要在 td 标签的 ng-repeat 中添加 track by $index

<td ng-repeat="supported in supportedList track by $index">{{supported}}</td>

这是一个 demo

您还可以将“特征”数组转换为包含对象而不是基元,这样您就不需要track by $index

这是一个 demo

关于javascript - 当动态键值为数组时,如何使用 ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23818411/

相关文章:

JavaScript 判断动态命名的函数是否存在

angularjs - 错误 : No controller in directive

javascript - 通过 Angular JS $http.post 使用 slim 框架时出现 404 无效的 http 状态代码

angularjs - 以 Angular 迭代每第三行

javascript - 如何在 html 中使用 ng-repeat 和索引

javascript - 如何使用 JavaScript 或 jQuery 将选定的文本包装到特定标签中的网页中?

javascript - 使用是/否命令为 Web 创建模式

javascript - 如何为 Javascript 对象添加设置的键值?

javascript - 如何验证 Angular 值 1 和 1.00 相同且 1.01 不同

javascript - 传递 id 的 Angular 路由不起作用