Question

我有一个使用ng-repeat发布的项目列表。我从Rest API响应中只得到一个变量，那就是Product Name。我的产品列表如下所示

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

这是一个动态列表，我想为列表分配一个数字系列，使它看起来像这样

iPhone 7
iPad 2
三星Galaxy
..
..

等等。我该怎么做

Answer 1

如果我理解正确，希望它有所帮助，让你朝着正确的方向前进。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

通过@alphapilgrim提到的更简单的修改，您可以使用$index来获取序列/序列号。因为它以0和+1开始，对于正序的每个增量都是。

您可以在与<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>

AngularJS - 自动将增量标签分配给项目列表

2 个答案: