CODEWITHSUNDEEP
arraysangularjsangularjs-ng-repeat
Lokendra Singh Panwar
Lokendra Singh Panwar

Reputation: 511

How to set dynamic limit in ng-repeat angular js

How to set dynamic limit in ng-repeat ? I want to set limit if window width is less than 750 px than set limit to 1.

Here is my controller function:

$scope.$watch('window.innerWidth', function() {
    $scope.wsizewindow = window.innerWidth;

    if($scope.wsizewindow < 750) {
        $scope.limit = 0;
    } else {
    }

    console.log($scope.wsizewindow);
});

Here is my html:

<flex-slider slider-id=""
             flex-slide="responsibilities in roles.responsibilities track by $index | limitTo: limit" animation="slide"
             animation-loop="false" item-width="350" item-margin="1" keyboard="false"
             as-nav-for="#slider" slideshow="false" control-nav="false">    
    <li class="col-sm-3" ng-if="responsibilities.responsibilityName!=''"> 
        <div class="new-box" ng-if="$index!=roles.responsibilities.length-1">
            <div class="panel-heading1">Responsibility</div>
            <div class="col-xs-12 col-sm-12">
                <div class="strike" >
                    <span >{{responsibilities.responsibilityName}}</span>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 box">
                <div class="form-group list"  mb-scrollbar="scrollbar('vertical', true)">
                    <div class="panel panel-default" style="cursor: pointer;" ng-click="invokeReviewProcess(departments,roles,responsibilities,processes,isCompAdmin);" ng-repeat="processes in responsibilities.processes">
                        <span class="id">{{processes.name}}</span>
                    </div>
                </div>
                <div align="center" id="addProcessLink" ng-if="isAdmin === true && isGraph">
                    <a class="primary-link" ng-click="addProcess(departments.id,roles.id,responsibilities.id)" href="#"> Add a Process</a>
                </div>
            </div>
        </div>
    </li>
</flex-slider>

I want to set limit here:

responsibilities in roles.responsibilities track by $index | limitTo: limit.

Give me some suggestions. I am new to AngularJs. thanks.

Upvotes: 0

Views: 748

Answers (1)

Tarun Dugar
Tarun Dugar

Reputation: 8971

Use a function defined in your controller:

responsibilities in roles.responsibilities track by $index | limitTo: (setLimit())

In your controller:

$scope.setLimit = function() {
    //check if window width less than 750, if yes, return 1 else some other limit
}

Upvotes: 1

Related Questions