Question

我想将输入数字ng-model应用为下表的长度。

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>

Answer 1

最佳和最简单的解决方案是使用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>

根据数字输入在表格中呈现数据时出现问题

1 个答案: