Question

所以我有一个帖子列表，它们都有不同的长度，所以我在第500个字符处删除它们，但我想在ng-click上显示帖子的剩余部分。似乎可能有一些“有角度的方式”来做到这一点，但我还没有通过谷歌找到它。

<ul id = "postsList">
  <li ng-repeat="post in Posts" >
    <p>{{ post.messageBody | limitTo:500 }}</p>
    <button ng-click = "undoLimitTo()">View</button>
  </li>
</ul>

Answer 1

我会这样写：

为限制设置可编辑值并提供Posts长度

<ul id = "postsList">
  <li ng-repeat="post in Posts" ng-init="limit= 500">
    <p>{{ post.messageBody | limitTo:limit }}</p>
    <button ng-click = "limit = Posts.length">View</button>
  </li>
</ul>

Answer 2

试试这个：

<ul id = "postsList" ng-init="limit = 500">
  <li ng-repeat="post in Posts" >
    <p>{{ post.messageBody | limitTo:limit }}</p>
    <button ng-click = "limit = Number.MAX_SAFE_INTEGER">View</button>
  </li>
</ul>

修改

这是胡说八道。它将改变所有帖子的限制。

您可以在控制器中向limit添加Posts属性。然后：

<ul id = "postsList">
  <li ng-repeat="post in Posts" >
    <p>{{ post.messageBody | limitTo:post.limit }}</p>
    <button ng-click = "post.limit = post.messageBody.length">View</button>
  </li>
</ul>

Answer 3

我为您整理了一个小提琴，做了我认为您想要的。关键是要跟踪控制器内的listLimit，该控制器在单击 more / less 文本时会更改。

var module = angular.module("MyModule", []);
module.controller("MyController", function($scope) {
    // create the dummy list items
    $scope.list = [];
    for(var i=0; i<100; i++){
    	$scope.list.push({
      	value: i
      });
    }
    
    // set the initial item length
    $scope.totalItems = 5;
    
    // more/less clicked on
    $scope.more = function(){
    	if($scope.totalItems === 5){
      	$scope.totalItems = $scope.list.length;
      }else{
      	$scope.totalItems = 5;
      }    	
    }  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyModule" ng-controller="MyController">  
  <ul>
     <li ng-repeat="item in list | limitTo:totalItems">
      This is item {{$index}}           
     </li>
  </ul>
  <button type="button" ng-click="more()">{{totalItems === 5 ? 'more' : 'less'}}</button>
</div>

Answer 4

极其简单的版本：

在控制器中：

$scope.limit = 3;

$scope.setLimit = function (number) {

    $scope.limit = number;

}

以HTML

<div ng-repeat="item in items | limitTo:limit">

  <div ng-show="ng-show="items.length > limit && $index == 0">

    <span ng-click="setLimit (items.length)">show all</span>

  </div>

  <div>{item.yourexpression}}</div>

<div>

现在，它只会在有更多项目作为限制时显示div，并且只会在第一个项目上方显示它，我们将ng-repeat的长度发送给控制器并更新限制。完成！

删除角度限制到ng-click

4 个答案: