Question

[
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 7,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 6,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 13,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 1,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 20,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    }
]

大家好，我从我的休息服务中获取上述JSON，并希望使用angularjs在表中显示此结果。我的问题是我想以不同的方式在表中显示详细信息，如下所示： - 0 1-2 3-7 8-14 15+没有LDOC总计股票已售出

数据是动态的，它的值可能不同。请告诉我一个方法。谢谢

我需要在此表视图中显示

<table class="toggle-table">
<th style="background:none; border:0px;">&nbsp;</th>
<th>Today</th>
<th>1-2 Days</th>
<th>3-7 Days</th>
<th>8-12 Days</th>
<th>15+ Days</th>
<th>No Build Date</th>
<th>Total</th>
 <tr class="rowToClick">
    <td class="sold-btn">Sold</td>
    <td class="today-red">2</td>
    <td class="today-red">5</td>
    <td class="day-yellow">9</td>
    <td class="day-yellow">12</td>
    <td class="day-green">3</td>
    <td class="day-skyblue">0</td>
    <td class="day-skyblue">31</td>
</tr>
<tr class="rowToClick2">
    <td class="stock-btn">Stock</td>
    <td class="today-red">2</td>
    <td class="today-red">5</td>
    <td class="day-yellow">7</td>
    <td class="day-yellow">3</td>
    <td class="day-green">4</td>
    <td class="day-skyblue">0</td>
    <td class="day-skyblue">30</td>
</tr>
<tr class="total">
    <td>&nbsp</td>
    <td class="red-max">4</td>
    <td class="red-max">10</td>
    <td class="yellow-max">13</td>
    <td class="yellow-max">15</td>
    <td class="green-max">12</td>
    <td class="skyblue-max">0</td>
    <td class="skyblue-max">61</td>
</tr>

Answer 1

您可以使用正常的table语法加上angular ng-repeat指令来遍历您的数组，直到它符合您的需求：

＆＃13;

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.data = [
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 7,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 6,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 13,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 1,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 20,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    }
];
}

＆＃13;

table tr td {
  border: 1px solid black;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <table ng-controller="MyCtrl">
    <tr ng-repeat="obj in data">
      <td>{{obj.type}}</td>
      <td>{{obj.count}}</td>
      <td>{{obj.ldocRange}}</td>
      <td>{{obj.brand}}</td>
    </tr>
  </table>
</div>

＆＃13;

如何使用angularjs以表格格式显示JSON以下

1 个答案: