Question

我试图生成一个有序列表，但是每个列表项之前的数字始终为1。

HTML的一部分：

<ol ng-repeat="student in student.gpas | filter: studentName | orderBy: 'gpa'">
        <li>{{'Name: ' + student.name + ' GPA: ' + student.gpa}}</li>            
    </ol>

JavaScript的一部分：

$scope.student = {
    gpas: [
    { name: "a c", gpa: 3.5 },
    { name: "b c", gpa: 2.5 },
    { name: "c c", gpa: 1.5 },
    { name: "d c", gpa: 0.5 }
    ]
};

结果：

为什么订购单不起作用？

Answer 1

在ng-repeat中使用它而不是在ol中使用li

<ol>
        <li ng-repeat="student in student.gpas | filter: studentName | orderBy: 'gpa'"> 
           {{'Name: ' + student.name + ' GPA: ' + student.gpa}}
       </li>            
</ol>

Answer 2

ng-repeat应该在 li 而非 ol

上完成

演示

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
$scope.student = {
    gpas: [
    { name: "a c", gpa: 3.5 },
    { name: "b c", gpa: 2.5 },
    { name: "c c", gpa: 1.5 },
    { name: "d c", gpa: 0.5 }
    ]
};
}]);

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 
</head>

<body ng-controller="Main">
<ol>
   <li ng-repeat="student in student.gpas | filter: studentName | orderBy: 'gpa'"> 
           {{'Name: ' + student.name + ' GPA: ' + student.gpa}}
   </li>            
</ol>
</body>
</html>

Answer 3

尝试：

<ol>
    <li ng-repeat="student in student.gpas | filter: studentName | orderBy: 'gpa'"> 
       {{'Name: ' + student.name + ' GPA: ' + student.gpa}}
    </li>            
</ol>

Answer 4

请在ng-repeat元素中使用<li>元素内的<ol>。像这样：

<ol >
    <li ng-repeat="student in student.gpas | filter: studentName | orderBy: 'gpa'">
     {{'Name: ' + student.name + ' GPA: ' + student.gpa}}</li>            
</ol>

ngRepeat为什么不按预期生成有序列表？

4 个答案: