Javascript 加载动态数据时出错，正在重复_Javascript_Angularjs_Angularjs Directive_Angularjs Ng Repeat

Javascript 加载动态数据时出错，正在重复

javascript angularjs

Javascript 加载动态数据时出错，正在重复,javascript,angularjs,angularjs-directive,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Angularjs Ng Repeat,伙计们，我有一个问题，我一定是做错了什么，大多数人都不知道，谷歌浏览器似乎在渲染时或角度组织json，使“ng重复”。当我将数据加载到网格中，它会反转，列也会反转 'use strict'; angular.module('grid', []) .run(templateRun) .directive('grid', Grid); function templateRun ($templateCache) { $templat

伙计们，我有一个问题，我一定是做错了什么，大多数人都不知道，谷歌浏览器似乎在渲染时或角度组织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>

“严格使用”；
角度模块（'网格'，[]））
.run（templateRun）
.指令（“电网”，电网）；
函数templateRun（$templateCache）{
$templateCache.put（'grid2.html'，'{{value.text}}{{field}}'）；
}
函数网格（$templateCache、$rootScope、$compile、$rootElement）{
返回{
限制：'E'，
$scope:{
选项：“=数据”
},
模板：$templateCache.get（'grid2.html'），
链接：函数（$scope、$element、$attr）{
}
}
}
角度模块（“应用程序”、[“网格”]）
.控制器（“HomeCtrl”，HomeCtrl）；
函数HomeCtrl（$scope）{
$scope.people=[
{
姓名：“约翰”，
职业：“程序员”，
年龄:5
}, 
{
姓名：“吉尔”，
职业：“分析师”，
年龄:10
}, 
{
姓名：“杰夫”，
职业：“销售”，
年龄:2
}, 
{
姓名：“琼”，
职业：“设计师”，
年龄:50
}
];
$scope.option={
数据：$scope.people，
栏目：[
{
案文：“Nome”
},
{
案文：“Ocupação”
},
{
文本：“Idade”
}
]
}
}
网格

错误提示：

解决此问题的方法可能有几种

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

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

tbody

html模板的一部分

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


{{data[col.dataProp]}

工作