Javascript 获取泛型数组时为表重复ng

我有一个场景，在这个场景中，我使用指令执行通用的可重用表结构，在这个场景中，我得到不同的json数据，我需要在表头和表体中重复它

控制器代码：

angular.module('plunker', []);

function MainCtrl($scope) {
  $scope.firstJson=[{name:"abc1",empid:10215},{name:"abc2",empid:10216},{name:"abc3",empid:10217},{name:"abc4",empid:10218},{name:"abc5",empid:10219}];
  $scope.secondJson= [{product: "mobile", price: "10000"}, {product: "camera", price: "12000"}];
  $scope.name =  $scope.firstJson;
  $scope.tableHeading=["heading1","heading2","heading3"];
  $scope.toggle=true;
}

这里我有两个json，可以在应用程序中的任何位置使用，json键应该是表头，值应该是表体

指令代码：

    angular.module('plunker').directive('sampleDirective', function(){

  return {
    // restrict to an element (A = attribute, C = class, M = comment)
    // or any combination like 'EACM' or 'EC'
    restrict: 'A',
    scope: {
      name: '=',
      tableHeading:'='
    },

    templateUrl: 'reverse_template.html',

    replace: true, //replace the directive element with the output of the template.
    //the link method does the work of setting the directive
    // up, things like bindings, jquery calls, etc are done in here


  };
});

请参考plunker链接

firstJson的最终输出

secondJson的最终输出

---

任何帮助都将不胜感激

对于您的问题，我能想到的最好办法是基于对象数组的键分离列条目，然后基于列动态显示行。下面是一个有关其工作原理的示例：

你的指令

return {
  restrict: 'A',
  scope: {
    columns: '=',
    rows   : '='
  },

  replace: true,

  link: function ($scope) {

    $scope.displayData = function (row, column) {
      return row[column];
    };
  }
};

您的HTML将如下所示：

<tr>
  <th ng-repeat="column in columns">{{column}}</th>
</tr>
<tbody>
  <tr ng-repeat="row in rows">
    <td ng-repeat="column in columns>{{displayData(row, column)}}</td>
  </tr>
</tbody>

提示：如果要从对象数组中动态提取键，只需获取1项，然后获取其属性并放入$scope.columns

例如：

var extractAttributes = function (object) {
  var attrs = [];

  angular.forEach(object, function (value, key) {
    attrs.push(key);
  });

  return attrs;
}

提示：在更新行数据时，还可以使用$watch在指令中进行列分离，然后从中提取列

---

希望对您有所帮助

对于您的问题，我能想到的最好的办法是基于对象数组的键分离列条目，然后基于列动态显示行。下面是一个有关其工作原理的示例：

你的指令

return {
  restrict: 'A',
  scope: {
    columns: '=',
    rows   : '='
  },

  replace: true,

  link: function ($scope) {

    $scope.displayData = function (row, column) {
      return row[column];
    };
  }
};

您的HTML将如下所示：

<tr>
  <th ng-repeat="column in columns">{{column}}</th>
</tr>
<tbody>
  <tr ng-repeat="row in rows">
    <td ng-repeat="column in columns>{{displayData(row, column)}}</td>
  </tr>
</tbody>

提示：如果要从对象数组中动态提取键，只需获取1项，然后获取其属性并放入$scope.columns

例如：

var extractAttributes = function (object) {
  var attrs = [];

  angular.forEach(object, function (value, key) {
    attrs.push(key);
  });

  return attrs;
}

提示：在更新行数据时，还可以使用$watch在指令中进行列分离，然后从中提取列

---

希望这有帮助

我选择了这种方法

<div>
  Hello, {{name}} ,{{tableHeading}}

 <table ><tr><th ng-repeat="(key,value) in name[0]">{{key}}</th></tr><tbody><tr ng-repeat="names in name"><td ng-repeat="(key, value) in names">{{value}}</td></tr></tbody></table>

</div>

你好，{{name}，{{{tableHeading}
{{key}}{{value}}

---

我选择了这种方法

<div>
  Hello, {{name}} ,{{tableHeading}}

 <table ><tr><th ng-repeat="(key,value) in name[0]">{{key}}</th></tr><tbody><tr ng-repeat="names in name"><td ng-repeat="(key, value) in names">{{value}}</td></tr></tbody></table>

</div>

你好，{{name}，{{{tableHeading}
{{key}}{{value}}

---

第一个和第二个数组是您提供的两列数组

我添加了第三个数组，向您展示它也可以处理3列

不管列数或行数是多少，它实际上都能工作

注意：将templateURL替换到右侧文件中，并将

script ng template

中的内容移动到外部文件中

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.firstJson=[{name:“abc1”，empid:10215}，{name:“abc2”，empid:10216}，{name:“abc3”，empid:10217}，{name:“abc4”，empid:10218}，{name:“abc5”，empid:10219}]；
$scope.secondJson=[{product:“mobile”，price:“10000”}，{product:“camera”，price:“12000”}]；
$scope.thirdJson=[{名称：“a”，价格：“50”，数量：“3”}，{名称：“b”，价格：“60”，数量：“2”}]；
});
app.directive（'sampleDirective'，function（）{
返回{
限制：“A”，
范围：{
数据：'='
},
templateUrl:“reverse_template.html”，
替换：正确
}
});
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
文本对齐：居中；
}

第一个json
第二个json
第三个json
{{key}}
{{value}}
第一个和第二个数组是您提供的两列数组

我添加了第三个数组，向您展示它也可以处理3列

不管列数或行数是多少，它实际上都能工作

注意：将templateURL替换到右侧文件中，并将
script ng template
中的内容移动到外部文件中


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.firstJson=[{name:“abc1”，empid:10215}，{name:“abc2”，empid:10216}，{name:“abc3”，empid:10217}，{name:“abc4”，empid:10218}，{name:“abc5”，empid:10219}]；
$scope.secondJson=[{product:“mobile”，price:“10000”}，{product:“camera”，price:“12000”}]；
$scope.thirdJson=[{名称：“a”，价格：“50”，数量：“3”}，{名称：“b”，价格：“60”，数量：“2”}]；
});
app.directive（'sampleDirective'，function（）{
返回{
限制：“A”，
范围：{
数据：'='
},
templateUrl:“reverse_template.html”，
替换：正确
}
});
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
文本对齐：居中；
}

第一个json
第二个json
第三个json
{{key}}
{{value}}
您能告诉我们最终结果吗？你有3个标题，但有4种data@Weedoze你可以在那里看到Json结构，键应该在表头重复，值应该在表体重复。它没有固定的表头键数，Json将是通用的。你能给出一个最终结果的简要说明吗，因为你的问题a和plunker是模糊的constructed@Shikhathakur为什么有2个JSON？它们有联系吗？如果是，它们是如何联系的？为什么只发送
firstJson
数组？如果只将键显示为列名，为什么会有一个
表格标题
数组？@Angular\u 10我已经更新了我的问题，请给我们看一下最终结果好吗？你有3个标题，但有4种data@Weedoze你可以在那里看到Json结构，键应该在表头重复，值应该在表体重复。它没有固定的表头键数，Json将是通用的。你能给出一个最终结果的简要说明吗，因为你的问题a和plunker是模糊的constructed@Shikhathakur为什么有2个JSON？它们有联系吗？如果是，它们是如何联系的？为什么只发送
firstJson
数组？如果只显示