AngularJS - 將增量標籤自動分配到項目列表

Question

我有一個使用ng-repeat發佈的項目列表。我從Rest API響應中只獲得一個變量，即產品名稱。我的產品列表看起來像這樣

iPhone 7 iPad 2的 三星Galaxy .. .. ..

這是一個動態列表，我想將一個數字系列的列表，以便它看起來像這樣

1. iPhone 7
2. iPad 2的
3. 三星Galaxy
4. ...
5. ...

等。我該怎麼做

Answer 1

如果我理解正確，希望它有幫助，並讓你走向正確的方向。

function exampleController($scope) { 
 
    $scope.phones = [{ 
 
    model: 'iphone' 
 
    }, { 
 
    model: 'iPad 2' 
 
    }, { 
 
    model: 'Samsung Galaxy' 
 
    }]; 
 
} 
 

 
angular 
 
    .module('example', []) 
 
    .controller('exampleController', exampleController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container-fluid" ng-app="example"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div class="row"> 
 
     <ol> 
 
     <li ng-repeat="phone in phones track by $index" ng-bind="phone.model"></li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

與@alphapilgrim提到什麼輕微的修改，你可以用$index得到它與0和+1開始爲每一個增量正確的順序序列/串行number.As。

您可以在任何HTML標籤上使用此技術，而不像<li> & <ol>生成序列號。有序列表項內

function exampleController($scope) { 
 
    $scope.phones = [{ 
 
    model: 'iphone' 
 
    }, { 
 
    model: 'iPad 2' 
 
    }, { 
 
    model: 'Samsung Galaxy' 
 
    }]; 
 
} 
 

 
angular 
 
    .module('example', []) 
 
    .controller('exampleController', exampleController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container-fluid" ng-app="example"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div class="row"> 
 
     
 
     <p ng-repeat="phone in phones track by $index" >{{$index+1}}.{{phone.model}}</p> 
 
     
 
    </div> 
 
    </div> 
 
</div>