AngularJS: Как изменить ng-repeat limitTo на основе переменной?

Я хотел бы показать другой limitTo число на Angular.js ng-repeat на основе переменной.

Вот мой код:

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

и в контроллере:

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

Я могу только предположить, что есть более элегантный способ изменения limitTo на основе ввода поиска, я просто не знаю, что искать.

Вы можете увидеть реализацию этого кода на http://happinesshunt.co.

Постскриптум Я новичок здесь и новичок в развитии в целом, поэтому, пожалуйста, простите меня, если вопрос не был задан правильно.

Спасибо заранее!

Ответы

Ответ 1

Здесь может быть первое решение (поскольку оно может быть улучшено, например, путем скрытия/отображения более/менее ссылок):

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

В вашем контроллере:

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

Ответ 2

размещение функции внутри ng-click - это хорошая процедура, но мы можем непосредственно увеличивать ее внутри, также здесь один пример.

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

и в контроллере

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