如何在AngularJS的ng-repeat中单独控制单条帖子的显示更多

核心思路：不要用全局变量控制所有帖子的显示长度，给每个帖子对象添加独立的状态属性（比如isExpanded），单独控制单条帖子的展开状态。

修改后的代码实现 #

HTML部分 #

<div ng-repeat="post in posts"> <!-- 修正原代码中变量名重复的问题，将遍历的数组改为posts -->
  <div class="post-block__content mb-2">
    <p>{{post.caption | limitTo: post.isExpanded ? post.caption.length : 50}}</p>
    <span ng-if="post.caption.length > 50">
      <button ng-click="post.isExpanded = !post.isExpanded">
        {{post.isExpanded ? 'Show less' : 'Show more'}}
      </button>
    </span>
  </div>
</div>

控制器初始化处理 #

如果你的帖子数据是从接口获取的，在拿到数据后给每个帖子添加默认的收起状态：

// 假设$scope.posts是接口返回的帖子数组
$scope.posts.forEach(post => {
  post.isExpanded = false; // 默认隐藏超出50字的内容
});

关键说明 #

• 原代码中ng-repeat="post in post"存在变量名冲突问题，必须改成post in posts避免逻辑错误。
• 每个帖子的展开状态独立存储在自身对象中，点击按钮时仅切换当前帖子的isExpanded值，不会影响其他帖子。
• 按钮文字随状态动态切换，用户可以直观判断当前操作是展开还是收起。

内容的提问来源于stack exchange，提问作者DSV