Question

请问，我们如何使用ng-repeat制作下表？我没有权限更改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>

感谢!!!

Answer 1

您可以找到ng-repeat文档

https://docs.angularjs.org/api/ng/directive/ngRepeat

$scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];

<div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>

Answer 2

您可以在将数据渲染到视图中之前将其格式化到控制器中。此外，在我的示例中，您将看到::绑定。

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

<强>控制器

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

您可以看到Working Plunker

AngularJS：如何用Ng-repeat制作这个表？

2 个答案: