Question

标题＆＃39; Speedruns＆＃39;不断重复。我怎样才能解决这个问题？另外，如果有更好的方法，请告诉我。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' href='styles.css'>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
  <script>
    var app = angular.module('player2', []);

    app.controller('MainController', function($scope, $http) {
      $scope.data0 = null;

      $scope.urls = [ // List of REST api calls with with all the streams we want.
        'http://api.speedrunslive.com/test/teamK',
      ];

      $http.get($scope.urls[0]).success(function(data) {
        $scope.data0 = angular.fromJson(data);
        console.log(angular.fromJson(data))
      });
    });
  </script>
</head>

<body ng-app='player2'>
  <div ng-controller="MainController">
    <table class="table-size" ng-repeat="chan in data0.channels">
      <tr>
        <th class="text-center" colspan="2">Speedruns</th>
      </tr>
      <tr>
        <td class="text-left">{{chan.channel.display_name}}</td>
        <td class="text-left">{{chan.channel.current_viewers}}</td>
      </tr>
    </table>
  </div>
</body>

</html>

＆＃13;

附上一个包含代码的傻瓜。

Plunker

Answer 1

你要重复的是tr，所以把你的重复放在那里。目前你正在重复整个表格。以下应该有效：

<table class="table-size" >
      <tr>
        <th class="text-center" colspan="2">Speedruns</th>
      </tr>
      <tr ng-repeat="chan in data0.channels">
        <td class="text-left">{{chan.channel.display_name}}</td>
        <td class="text-left">{{chan.channel.current_viewers}}</td>
      </tr>
    </table>

Angularjs表头不断重复（使用ng-repeat）

1 个答案: