错误加载动态数据ng重复

Error Load dynamic data ng-repeat

本文关键字：ng 重复数据动态加载错误更新时间：2023-09-26

伙计们，我有一个问题，我一定做错了什么，大多数人都不知道，似乎谷歌chrome在渲染时间或角度组织json，使"ng重复"。当我在网格中加载数据时，它会反转列，这就是反转

    'use strict';
     angular.module('grid', [])
      .run(templateRun)
      .directive('grid', Grid);
    function templateRun ($templateCache) {
        $templateCache.put('grid2.html', '<table><thead><tr><th ng-repeat="(key,value) in option.columns" ng-click="sort(value.predicate)"><strong>{{value.text}}</strong><th><tr></thead><tbody><tr ng-repeat="data in option.data"><td ng-repeat="field in data">{{field}}</td></tr></tbody></table>');
    }
    function Grid ($templateCache, $rootScope, $compile, $rootElement) {
        return{
            restrict: 'E',
            $scope: {
                option: "=data"
            },
            template: $templateCache.get('grid2.html'),
            link: function ($scope, $element, $attr) {
            }
        }
    }

    angular.module("app", ["grid"])
        .controller("HomeCtrl", HomeCtrl);
    function HomeCtrl ($scope) {
        $scope.people = [
            {
                name: "John",
                occupation: "Programmer",
                age: 5
            }, 
            {
                name: "Jill",
                occupation: "Analyst",
                age: 10
            }, 
            {
                name: "Jeff",
                occupation: "Sales",
                age: 2
            }, 
            {
                name: "Joan",
                occupation: "Designer",
                age: 50
            }
        ];
        $scope.option = {
            data: $scope.people,
            columns: [
                {
                    text: "Nome"
                },
                {
                    text: "Ocupação"
                },
                {
                    text: "Idade"
                }
            ]
        }
    }

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
</head>
<body ng-controller="HomeCtrl">
    <grid data="option"></grid>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="grid.js"></script>
</body>
</html>

错误img：https://i.stack.imgur.com/RpVNe.png

可能有几种方法可以解决这个问题。

一种方法是将列名映射到相应的json字段名，并使用此映射来确定在表的每个单元格中放置哪个字段。

    $scope.option = {
        data: $scope.people,
        columns: [
            {
                text: "Nome",
                dataProp: "name"
            },
            {
                text: "Ocupação",
                dataProp: "occupation"
            },
            {
                text: "Idade",
                dataProp: "age"
            }
        ]
    }

html模板的tbody部分

<tbody>
  <tr ng-repeat="data in option.data">
    <td ng-repeat="col in option.columns"> {{data[col.dataProp]}}</td>
  </tr>
</tbody>

工作示例