我正在为某个应用程序编写一些代码。我想限制聊天中的消息
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>
这并不限制消息,所有消息都会显示。有人能帮忙吗?
首先,您必须定义所有必要的变量才能使其工作
控制器示例:
$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,它可以满足您的需要。
您的列表之所以不受限制,是因为main.limitM
未定义。
我相信你在控制器内呼叫this.limitM = -10;
。视图无法看到limitM变量。他们只能访问在$scope上定义的变量。
将this.limitM
更改为$scope.limitM
,将main.limitM
更改为limitM
为什么不试试这个:
$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>
根据文件,它应该是有效的。
编辑
检查这个jsfiddle,看看你试图完成的工作示例。