Question

我正在为某些应用程序编写一些代码。我想限制聊天中的消息

this.limitM = -10;
$scope.msgsCount = //contains the number of messages


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

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

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

这不是限制消息，所有消息都会出现。有人可以帮忙吗？

Answer 1

首先，您必须定义所有必要的变量才能使其工作。
您的控制器示例：

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

并查看：

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

这是一个简单的 plunk ，可以满足您的需求。

Answer 2

您的列表不受限制的原因是main.limitM未定义。

我相信你在控制器内部呼叫this.limitM = -10;。视图无法看到limitM变量。他们只能访问$ scope。

上定义的变量

将this.limitM更改为$scope.limitM，将main.limitM更改为limitM

Answer 3

你为什么不试试这个：

$scope.limitM = 10; // This is your scope's limit

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

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

根据documentation，它应该有用。

修改

选中此jsfiddle以查看您尝试完成的工作示例。

限制在AngularJs中不在ng-repeat中工作

3 个答案: