我想将输入数字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>
答案 0 :(得分: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>