Question

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

提前致谢..

Answer 1

您按下某个按钮，某些事件将被触发，您将点击某些API并且响应将显示在该页面上。如果是，则按下按钮，单击ShowData函数获取触发。

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

in Html

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

Answer 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++;
}

}])

Answer 3

你可以使用ng-repeat with limitTo filter来解决上述问题。这里$ 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>

如何逐个显示提取的记录

3 个答案: