数字入力による表のデータのレンダリングでの問題

入力番号ng-modelを下の表の長さとして適用したいとします。数字入力による表のデータのレンダリングでの問題

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

<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>

出典

2017-12-07 Samudrala Ramu

ベストと最も簡単な解決策はlimitToフィルタを使用することです。これは、AngularJSネイティブフィルタであり、反復結果をngRepeatに制限します。入力フィールドが空の場合、バック最大長に `numberOfRows`のデフォルトになるだろう何

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

 
$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>

出典

2017-12-07 09:44:57 Zooly

？ –

は1レコードのデフォルト値を表示する必要があります –

編集した例を参照してください。あなたは1つのことを逃しました：numberOfRowsはコントローラの外です。今ではデフォルト値1で動作しています – Zooly

数字入力による表のデータのレンダリングでの問題

答えて

関連する問題