Javascript AngularJS：如何使用Ng重复制作此表？_Javascript_Angularjs_Angularjs Ng Repeat_Ng Repeat

Javascript AngularJS：如何使用Ng重复制作此表？

javascript angularjs

Javascript AngularJS：如何使用Ng重复制作此表？,javascript,angularjs,angularjs-ng-repeat,ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,Ng Repeat,请问，我们如何用ng重复制作下表？我没有更改json结构的权限，因此我必须以这种方式使用我的json： $scope.carCollection = { 'Toyota': [ { 'model': 'Corolla', 'price': '20.000,00', 'tag': ['a', 'b'] },{ 'name': 'Hilux',

请问，我们如何用ng重复制作下表？我没有更改json结构的权限，因此我必须以这种方式使用

我的json：

$scope.carCollection = {
    'Toyota': [
        {
            'model': 'Corolla',
            'price': '20.000,00',
            'tag': ['a', 'b']
        },{
            'name': 'Hilux',
            'price': '31.000,00',
            'tag': ['b', 'c']
        }
    ],
    'Honda': [
        {
            'model': 'Civic',
            'price': '18.000,00',
            'tag': ['c']
        }
    ]
};

这是html表格：

<table>
    <tr>
        <td>Producer</td>
        <td>Model</td>
        <td>Price</td>
        <td>Tags</td>
    </tr>
    <tr>
        <td>Toyota</td>
        <td>Corolla</td>
        <td>20.000,00</td>
        <td>a b</td>
    </tr>
    <tr>
        <td>Toyota</td>
        <td>Hilux</td>
        <td>31.000,00</td>
        <td>b c</td>
    </tr>
    <tr>
        <td>Honda</td>
        <td>Civic</td>
        <td>18.000,00</td>
        <td>c</td>
    </tr>
</table>


制作人
模型
价格
标签
丰田
花冠
20.000,00
a b
丰田
希卢克斯
31.000,00
b c
本田
公民的
18.000,00
C

谢谢

您可以找到ng repeat文档

$scope.friends=
[{姓名：'John'，电话：'555-1212'，年龄：10}，
{姓名：'Mary'，电话：'555-9876'，年龄：19}，
{姓名：'Mike'，电话：'555-4321'，年龄：21}，
{姓名：'Adam'，电话：'555-5678'，年龄：35}，
{姓名：'Julie'，电话：'555-8765'，年龄：29}]；
名称
电话号码
年龄
{{friend.name}
{{朋友.电话}
{{friend.age}

在视图中呈现数据之前，可以将数据格式化到控制器中。此外，在我的示例中，您将看到

：

绑定

这是一次性的绑定，一旦表达式稳定，它将停止重新计算表达式，因此您可以通过减少观察者的数量来改进页面加载

控制器

(function(){

function Controller($scope) {

  $scope.carCollection = {
      'Toyota': [
          {
              'model': 'Corolla',
              'price': '20.000,00',
              'tag': ['a', 'b']
          },{
              'model': 'Hilux',
              'price': '31.000,00',
              'tag': ['b', 'c']
          }
      ],
      'Honda': [
          {
              'model': 'Civic',
              'price': '18.000,00',
              'tag': ['c']
          }
      ]
  };

  //To format our data
  function format(data){
    //Return a flatten array
    return [].concat.apply([], Object.keys(data).map(function(key){
      //Map our data object
      return data[key].map(function(elm){
        //Add brand property with the current key
        elm.brand = key;
        //Join tag array value  
        elm.tag = elm.tag.join(' ');
        return elm;
      });
    }));
  }

  //Apply our format function
  $scope.carCollection = format($scope.carCollection);



}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

然后，您将得到一个平面数组，因此您可以对其进行迭代

HTML

  <body ng-app='app' ng-controller='ctrl'>

    <table>
      <tr>
          <td>Producer</td>
          <td>Model</td>
          <td>Price</td>
          <td>Tags</td>
      </tr>
      <tr ng-repeat="item in ::carCollection">
        <td>{{::item.brand}}</td>
        <td>{{::item.model}}</td>
        <td>{{::item.price}}</td>
        <td>{{::item.tag}}</td>
      </tr>
    </table>

  </body>


制作人
模型
价格
标签
{{：：item.brand}
{{：：item.model}
{{：：item.price}
{{：：item.tag}

您可以看到

到目前为止您尝试了什么？您看过ng repeat的在线示例吗？如果您对此感到厌倦，请首先将代码放在这里

  <body ng-app='app' ng-controller='ctrl'>

    <table>
      <tr>
          <td>Producer</td>
          <td>Model</td>
          <td>Price</td>
          <td>Tags</td>
      </tr>
      <tr ng-repeat="item in ::carCollection">
        <td>{{::item.brand}}</td>
        <td>{{::item.model}}</td>
        <td>{{::item.price}}</td>
        <td>{{::item.tag}}</td>
      </tr>
    </table>

  </body>