Angular js ng-repeat动态标头,避免使用列

时间:2017-05-03 09:53:43

标签: angularjs

点击按钮后,我从Node JS获得以下响应。

[{
        "_id": "590998cca8ac14d0c075282c",
        "CompID": "0001388D",
        "CompName": "ONE"
    },
    {
        "_id": "590998cca8ac14d0c075282qc",
        "CompID": "0001388D2",
        "CompName": "TWO"
    },
    {
        "_id": "590998cca8ac14d0c07528qq2c",
        "CompID": "0001388D23",
        "CompName": "Three"
    }
]

我使用Angular JS表格打印此信息 - 重复

这是我的代码

我的问题是,是否可以在打印时跳过_id字段?

这是我的代码

<div ng-app="myapp" ng-controller="FirstCtrl">

         <table border="1">
  <tr>
    <th ng-repeat="(key, val) in collectioninfo[0]">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in collectioninfo">
    <td ng-repeat="column in row">
      {{ column }}
    </td>
  </tr>
</table>  
</div>

JSFiddle

3 个答案:

答案 0 :(得分:4)

您可以尝试ng-if以避免在ng-repeat中显示某些元素。

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
  $scope.collectioninfo = [{
      "_id": "590998cca8ac14d0c075282c",
      "CompID": "0001388D",
      "CompName": "ONE"
    },
    {
      "_id": "590998cca8ac14d0c075282qc",
      "CompID": "0001388D2",
      "CompName": "TWO"
    },
    {
      "_id": "590998cca8ac14d0c07528qq2c",
      "CompID": "0001388D23",
      "CompName": "Three"
    }
  ]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">

  <table border="1">
    <tr>
      <th ng-repeat="(key, val) in collectioninfo[0]" ng-if="key !== '_id'">{{ key }}</th>
    </tr>
    <tr ng-repeat="row in collectioninfo">
      <td ng-repeat="(key2, val2) in row" ng-if="key2 !== '_id'">
        {{ val2 }}
      </td>
    </tr>
  </table>



</div>

答案 1 :(得分:1)

检查jsfiddle here

<table border="1">
  <tr>
    <th ng-repeat="(key, val) in collectioninfo[0]" ng-show="key != '_id'">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in collectioninfo">
    <td ng-repeat="column in row" ng-hide="column === row._id">
      {{ column }}
    </td>
  </tr>
</table>

我已经添加了对'_id'键的检查。

答案 2 :(得分:0)

在角度控制器中得到响应后执行以下操作:

$scope.datas = [];
 //lines of code
.then(function success(response) {
 $scope.collectionInfo=response.data.collectionInfo;
            for(var i=0;i<$scope.collectionInfo.length;i++){
                 $scope.index=i;
                $scope.datas.push($scope.collectionInfo[i]);


            }
//lines of code
});

在html页面上执行此操作:

   <div id="DisplayCollection">
<table ng-repeat="x in collectionInfo">
    <tr>
        <th>
            CompID
        </th>
        <th>
            CompName
        </th>
    </tr>
    <tr ng-repeat="y in x track by $index">
        <td>{{y.compID[$index]}}</td>
        <td>{{y.compName[$index]}}</td>
    </tr>

</table>

鉴于您已以数组形式发送数据:collectionInfo