AngularJS：重複並按數字範圍過濾

我試圖格式化'分數'系統。我什麼回報JSON是「標題」和「分數」 - 我非常希望它的格式是這樣的：AngularJS：重複並按數字範圍過濾

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的選項/過濾器等

來源

2016-08-04 rebel84

在你的ngrepeat中，你可以有一個ngif來檢查$ index是否可以被10整除 – ksav

我已經不應用任何過濾器condition.but達到這個分數我稍微改變了你的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; 
}

來源

2016-08-04 07:32:48 Aryan

可以使用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的倍數，它會顯示一個章節的標題，然後它會顯示標題和

來源

2016-08-04 07:21:21 Weedoze

AngularJS：重複​​並按數字範圍過濾

回答

相關問題

AngularJS：重複並按數字範圍過濾