AngularJS - アイテムリストにインクリメンタルラベルを自動的に割り当てる

Question

ng-repeatを使用してパブリッシュするアイテムのリストがあります。私はRest APIレスポンスから1つだけの変数を取得します。これは商品名です。製品の私のリストは、これは動的なリストであると私はリストに数値シリーズを割り当てたい

。これ

iPhone 7 iPadの2 サムスンギャラクシー .. .. のように見えますそれはこの

1. iPhoneのように見えることを7
2. のiPad 2
3. サムスンギャラクシー
4. ..
5. ..

のように。どうすればいいですか

Answer 1

私が正しく理解していれば、それが役立ち、正しい方向に進むことができれば幸いです。 @alphapilgrimが言及しているものと軽微変更で

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

、あなたはそれが正しい順序ごとの増分のための0と1で始まるシーケンス/シリアルnumber.Asを取得するために$indexを使用することができます。

<li> & <ol>とは異なり、この技術を任意のHTMLタグで使用してシリアル番号を生成することができます。順序付きリスト項目の内部

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>