web-dev-qa-db-fra.com

AngularJS: Comment changer ng-repeat limitTo en fonction d'une variable?

Je voudrais montrer un nombre limitTo différent sur Angular.js ng-repeat, basé sur une variable.

Voici mon code:

<input type="text" ng-model="search" ng-change="checkNewCard(search)"/>
<div ng-repeat="score in scores | filter:search | limitTo:6" ng-hide="search">
...
</div>
<div ng-repeat="score in scores | filter:search | limitTo:5" ng-hide="!search">
...
</div>
<div new-card name="search" ng-show="showNewCard"></div>

et dans le contrôleur:

$scope.showNewCard = false;
$scope.checkNewCard = function (search) {
if (search == "")
    $scope.showNewCard = false;
else {
    $scope.showNewCard = true;
    }
};

Je ne peux que supposer qu'il existe une façon plus élégante de modifier la limite. En fonction de l'entrée de recherche, je n'ai aucune idée de ce qu'il faut rechercher.

Vous pouvez voir l'implémentation de ce code sur http://happinesshunt.co .

P.S. Je suis nouveau ici et nouveau dans le développement en général, alors pardonnez-moi si la question n'a pas été posée correctement.

Merci d'avance!

javascriptangularjslimitangularjs-ng-repeat
15
Ronen Teva

Voici une première solution (car elle peut être améliorée, par exemple en masquant/affichant les liens plus/moins):

<div ng-repeat="score in scores | limitTo: limit">
...
</div>
<a href ng-click="incrementLimit()">more</a>
<a href ng-click="decrementLimit()">less</a>

Dans votre contrôleur:

var limitStep = 5;
$scope.limit = limitStep;
$scope.incrementLimit = function() {
    $scope.limit += limitStep;
};
$scope.decrementLimit = function() {
    $scope.limit -= limitStep;
};
35
sp00m

placer une fonction à l'intérieur d'un ng-click est une bonne procédure, mais nous pouvons incrémenter directement à l'intérieur cela aussi ici un exemple ..

<input type="text" ng-model="lmt"/><!--model with text box-->

<button ng-click="lmt=lmt+1">INCREMENT</button><!--model with INCREMENT btn-->
    <button ng-click="lmt=lmt-1">DECREMENT</button><!-- with DECREMENT btn-->

    <select ng-model="lmt"><!--select options also-->
    <option>20</option>
    <option>50</option>
    <option>100</option>
    </select>

        <table>
    <tr ng-repeat="employee in employData|limitTo: lmt"><!--lmt is the variable-->

        <td>{{employee.regNo}}</td>
        <td>{{employee.name}}</td>
      <!-----other------>
        </tr>
     </table>

et dans le contrôleur,

$scope.lmt=20; /or something
$scope.employeeData={something............};
2
DAS