Question

我有一个场景，我正在使用指令执行常见的可重用表结构，我得到不同的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;
}

这里我有两个Jsons，可以在应用程序的任何位置使用，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链接 Demo

firstJson的最终输出

secondJson的最终输出

任何帮助将不胜感激

Answer 1

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

我添加了第三个数组，向您展示它也适用于3列。

无论列数或行数

，它都会有效

注意：将templateURL替换为正确的文件，并将script ng-template内的内容移动到外部文件

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($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 = [{name: "a", price : "50", quantity : "3"}, {name:"b",price:"60",quantity:"2"}];
});

app.directive('sampleDirective', function(){
  return {
    restrict: 'A',
    scope: {
      data: '='
    },
    templateUrl: "reverse_template.html",
    replace : true
  }
});

＆＃13;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <h3>First json</h3>
  <div sample-directive data="firstJson"></div>

  <h3>Second json</h3>
  <div sample-directive data="secondJson"></div>
  
  <h3>Third json</h3>
  <div sample-directive data="thirdJson"></div>
  
  <script type="text/ng-template" id="reverse_template.html">
     <table>
       <thead>
         <tr>
           <th ng-repeat="(key, value) in data[0]">{{key}}</th>
         </tr>
       </thead>
       <tbody>
         <tr ng-repeat="item in data">
           <td ng-repeat="(key, value) in item">{{value}}</td>
         </tr>
       </tbody>
     </table>
  </script>
  
</body>

＆＃13;

Answer 2

我能想到的最好的问题是根据对象数组的键分隔列条目，然后根据列动态显示行。以下是有关其工作原理的示例：

你的指令

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>

并且在你的JS中

function MainCtrl($scope) {
  $scope.rows = [
    {
      'column_1': 1,
      'column_2': 2,
      'column_3': 3
    },
    {
      'column_1': 1,
      'column_2': 2,
      'column_3': 3
    }
  ];

  $scope.columns = ['column_1', 'column_2', 'column_3']
}

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

示例：

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

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

  return attrs;
}

提示：您还可以在更新行数据时使用 $ watch 在指令中执行列分隔，然后从那里提取列。

希望有所帮助

Answer 3

我采用了这种方法

<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>

enter link description here

获取通用数组时表的ng-repeat

3 个答案: