根据数字输入在表中渲染数据中的问题

我想将输入号ng模型应用于表的长度。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj =[ {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				
				]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
Display Rows in Table : <input type="number" ng-model="numberOfRows"/>
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in myObj">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
  <td>{{x.City}}</td>  
</tr>
</table>
</body>

最好，最简单的解决方案是使用limitTo滤波器。这是一个限制迭代的AngularJS天然过滤器，导致ngRepeat。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj =[ {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				  {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin"},
				
				]
$scope.numberOfRows = 1;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
  Display rows in Table : <input type="number" min="0" max="{{myObj.length}}" ng-model="numberOfRows"/>
  <table border="1">
    <tr ng-repeat="x in myObj | limitTo:numberOfRows">
      <td>{{x.Name}}</td>
      <td>{{x.Country}}</td>  
      <td>{{x.City}}</td>  
    </tr>
  </table>
</div>
</body>

相关内容

最新更新

热门标签：