ng-repeat not correctly restricting items in AngularJs

Question

ng-repeat not correctly restricting items in AngularJs

I'm currently working on some code for an application and I'm trying to set a limit for the messages in the chat.

this.messageLimit = -10;
$scope.messageCount = //stores the number of messages


<button ng-if="messageCount > -main.messageLimit" 
ng-click="main.messageLimit=-10+main.messageLimit">Load More</button>

<li class="singleMessage clearfix" 
    ng-repeat="msg in chat.messages | limitTo:main.messageLimit" 
    ng-class="::{myMessage: msg.senderName != chat.name}">

<img class="profileImage" alt="::{{chat.name}}" width="40px">
    <p ng-bind-html="parseMsg(msg)"></p>
</li>

Despite my efforts, the messages are not being limited and all of them continue to appear. Can anyone provide some guidance?

javascript angularjs

Answer 1

Answer №1

To get started, begin by defining all the necessary variables to ensure its functionality.
Take a look at this example for your controller:

$scope.limit = 3;
$scope.expand = function(limit) { 
  $scope.limit += limit;
}
$scope.chat = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

Next, consider the view:

<button ng-if="chat.length > limit" ng-click="expand(limit)">Load More</button>
 <li ng-repeat="msg in chat | limitTo : limit" >{{ msg }}</li>

For a simple solution that meets your requirements, check out this plunk.

Answer 2

To get started, begin by defining all the necessary variables to ensure its functionality.
Take a look at this example for your controller:

$scope.limit = 3;
$scope.expand = function(limit) { 
  $scope.limit += limit;
}
$scope.chat = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

Next, consider the view:

<button ng-if="chat.length > limit" ng-click="expand(limit)">Load More</button>
 <li ng-repeat="msg in chat | limitTo : limit" >{{ msg }}</li>

For a simple solution that meets your requirements, check out this plunk.

Answer 3

Answer №2

Your list is not being limited because the variable main.limitM is undefined.

You may have set this.limitM = -10; within the controller, but keep in mind that views do not have visibility to the limitM variable. Scope variables are the only ones that views can access.

To resolve this issue, update this.limitM to $scope.limitM and main.limitM to simply limitM.

Answer 4

Your list is not being limited because the variable main.limitM is undefined.

You may have set this.limitM = -10; within the controller, but keep in mind that views do not have visibility to the limitM variable. Scope variables are the only ones that views can access.

To resolve this issue, update this.limitM to $scope.limitM and main.limitM to simply limitM.

Answer 5

Answer №3

Have you considered giving this a shot:

$scope.limitM = 10; // The limit for your scope

<button ng-click="limitM = 20">Load More</button>

<li ng-repeat="msg in chat.msgs | limitTo: limitM">{{msg}}</li>

This method should be effective, as stated in the official documentation.

UPDATE

Take a look at this jsfiddle to see an operational demonstration of what you are trying to achieve.

Answer 6

Have you considered giving this a shot:

$scope.limitM = 10; // The limit for your scope

<button ng-click="limitM = 20">Load More</button>

<li ng-repeat="msg in chat.msgs | limitTo: limitM">{{msg}}</li>

This method should be effective, as stated in the official documentation.

UPDATE

Take a look at this jsfiddle to see an operational demonstration of what you are trying to achieve.

ng-repeat not correctly restricting items in AngularJs

Answer №1

Answer №2

Answer №3

Similar questions

Guide on utilizing Subscribe Observable for performing lookup in Angular

Error code 12030: AJAX request status

How can you call a function in ExpressJS that is located in a different file?

Utilizing ng-submit and ng-model to include a JSON object

"Step-by-step guide to building a webgrid or table to organize and display your

Encountering a "Module not found" issue while attempting to utilize the Google APIs Node.js client

What is causing the issue with passing the parameter in this angular $http.put method?

Guide on sending a personalized email to multiple recipients using office.js

Tips for transmitting variable values through a series of objects in a collection: [{data: }]

.When using element.find(), the error "undefined is not a function" is thrown in AngularJS for file upload

What is the best way to stop a Vue.js state using clearInterval()?

Organize subarrays within an array in Mongoose

Is there a reason why this MD Bootstrap Snippet isn't functioning properly?

Display a sleek Angular user interface for a calendar that seamlessly pulls events from a

Problem with modifying the dom within the Directive's link method - Angularjs

The process of altering a span label's class with JavaScript

The functionality of the jQuery script is not operating optimally, causing the expected alert to not be displayed

Anticipate that the function will remain inactive when the screen width is less than 480 pixels

A guide on updating an item in a basic JavaScript file with Node.js

The ThreeJS WebGLRenderTarget is displaying an empty texture