如何一一显示获取的记录答案

【问题标题】：How to display fetched records one by one如何一一显示获取的记录
【发布时间】：2015-08-01 00:26:11
【问题描述】：

我正在使用 angular-js、javscript 和 HTML。我可以从数据库中获取客户姓名及其详细信息的列表，但是当我按下下一步按钮时，我想一一显示这些记录。你能建议我怎么做吗

提前谢谢..

【问题讨论】：

【解决方案1】：

你按下了某个按钮，一些事件将被触发，你将点击一些 API，响应将显示在页面上。如果是，让我们说按钮单击 ShowData 功能被触发。

App.controller('CustomerCtrl',['$scope',function($scope){
   $scope.ShowData =  CustomerService.Names().then(function(data){
    $scope.customers =  data
   })
}])

在 HTML 中

<div ng-controller="CustomerCtrl">
 <div ng-repeat="customer in customers">
   <h3 ng-bind="customer.name"></h3>
 </div> 
</div>

【讨论】：

【解决方案2】：

<div ng-controller="CustomerCtrl">
  <button value="Next" ng-click="next()">
  <div>
    <h3>{{name}}</h3>
  </div> 
</div>

还有你的 js 文件

App.controller('CustomerCtrl',['$scope',function($scope){    
$scope.ShowData =  CustomerService.Names().then(function(data){    
$scope.customers =  data;       

  })    
var cnt=0;    
$scope.next=function(){
   $scope.name=$scope.customers[cnt].name;      
  cnt++;
}

}])

【讨论】：

【解决方案3】：

您可以通过使用 ng-repeat 和 limitTo 过滤器来解决上述问题。这里 $scope.customers 包含 JSON 数组。limitTo 也是通过使用变量 i 控制的。

function MyCtrl($scope) {
    $scope.i=1;
    $scope.customers = [{
        "firstName": "John",
      "place":"USA",
      "number":"78437375"
    }, {
        "firstName": "Anna",
      "place":"Asia",
      "number":"546464656"
    }, {
        "firstName": "Peter",
      "place":"Europe",
      "number":"24353535"
    }];
    $scope.showMoreCustomers=function()
    {
        
       $scope.i++;
    }
    $scope.showLessCustomers=function()
    {
      $scope.i--;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div   ng-app ng-controller="MyCtrl">
<button ng-click="showMoreCustomers()">+</button>
  <button ng-click="showLessCustomers()">-</button>
<ul>
    <li ng-repeat="cust in customers | limitTo:i">{{cust.firstName}},{{cust.place}},{{cust.number}}</li>
</ul>
</div>

【讨论】：