Question

我正在尝试格式化'得分'系统。我的json返回的是'标题'和'得分' - 理想情况下我希望它的格式如下：

100 --------

标题 - 99

标题 - 91

90 --------

标题 - 89

标题 - 81

80 --------（等等）

我已经做到了所以我的分数从最高到最低，但我不知道如何过滤范围，并以某种方式潜入额外的表格行为主“100,90,80”计数/标题领域

HTML代码：

<body ng-app="myApp" ng-controller="myCtrl">

<table class="table">
<tbody>
  <tr ng-repeat="x in myData | orderBy:'title' | orderBy:'-score'">
    <td>{{x.title}}</td>
    <td>{{x.score}}</td>
  </tr>
</tbody>
</table>
</body>

AngularJS：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {
  $http.get("scores.json").then(function (response) {
  $scope.myData = response.data;
 });
});

我认为可能是for循环或if语句可行，但我不确定如何将其纳入angularjs的选项/过滤器等。

Answer 1

您可以使用modulo operation

您的HTML

<body ng-app="myApp" ng-controller="myCtrl">

  <table class="table">
    <tbody>
      <tr ng-repeat-start="x in myData | orderBy:'title' | orderBy:'-score'" ng-if="x.score % 10 == 0">
        <td colspan="2">x.score -----------</td>
      </tr>
      <tr ng-repeat-end>
        <td>{{x.title}}</td>
        <td>{{x.score}}</td>
      </tr>
    </tbody>
  </table>
</body>

如果您的分数是10的倍数，它将显示一个部分的标题，然后它将显示标题和分数

Answer 2

我已经实现了这一点而没有应用任何过滤条件。但我稍微改变了你的json格式。在这里查看我的jsfiddle。

JsFiddle

这是我的代码

脚本

var myApp = angular.module('Application', []);

myApp.controller('myController', ['$scope', function($scope) {
    $scope.tabledata = [{
        title:"100",subhead:[{value:"99"},{value:"98"},{value:"97"}]
    }, {
        title:"90",subhead:[{value:"89"},{value:"88"},{value:"87"}]
    }, {
        title:"80",subhead:[{value:"79"},{value:"78"},{value:"77"}]
    }, {
        title:"70",subhead:[{value:"69"},{value:"68"},{value:"67"}]
    }];    

}]);

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="Application" ng-controller="myController">
    {{ tabledata }}
    <hr>
    <div ng-repeat="data in tabledata">
      <div id="data.title" class="title">
        {{data.title}}
      </div>
      <div ng-repeat="subHeading in data.subhead" class="subhead"> 
        {{subHeading.value}}
      </div>
    </div>

</div>

CSS

.title
{
  background-color:#ccc;
  font-weight:bold;
  font-size:24px;
  widht:100%;
  height:auto;

}
.subhead{
  background-color:#d7d7d7;  
  font-size:18px;
  widht:100%;
  height:auto;  
}

AngularJS：按编号范围重复和过滤

2 个答案: