Question

我使用ng-repeat来显示＆＃34; n＆＃34;帖子。我想根据节目/隐藏独立显示post.teaser或post.fullstory。这段代码根本不起作用。最好的＆＃34;我所做的就是让所有帖子同时在teaser或fullStory之间切换，但我还没有能够弄清楚如何独立完成。这是我到目前为止的代码：

<div class="w-row blog-row" ng-repeat="post in posts">
  <div class="blog-block-one">
    <h3 class="post-headline">{{post.title}}</h3>
      </div
      <div class="blog-post-text"  ng-show="status" ng-bind-html="post.teaser"></div>
      <h4 data-ix="read-more" class="blog-post-more" ng-show="status" ng-click="more(post.showMore)">Read more</h4>
      <h4 data-ix="read-more" class="blog-post-more" ng-hide="status" ng-click="less(post.showMore)">Read less</h4>
      <div class="blog-text-two" ng-hide="status" ng-bind-html="post.fullStory"></div>
</div>

$scope.posts = [{title: test1, teaser: "Post 1", fullStory: "All of post 1", showMore: true}, 
{title: test2, teaser: "Post 2", fullStory: "All of post 2", showMore: true}, 
{title: test3, teaser: "Post 3", fullStory: "All of post 3", showMore: true}]

          $scope.more = function(status){
            $scope.status = !status;
            return $scope.status;
          };

          $scope.less = function(status){
            $scope.status = !status;
            return $scope.status;
          };

Answer 1

您需要将showMore绑定到post对象：

$scope.toggleShow = function(post){
    post.showMore = !post.showMore;
};

<div class="w-row blog-row" ng-repeat="post in posts" ng-init=post.showMore = false">
  <div class="blog-block-one">
    <h3 class="post-headline">{{post.title}}</h3>
  </div
  <div class="blog-post-text"  ng-show="post.showMore" ng-bind-html="post.teaser"></div>
      <h4 data-ix="read-more" class="blog-post-more" ng-show="post.showMore" ng-click="toggleShow(post)">Read more</h4>
      <h4 data-ix="read-more" class="blog-post-more" ng-hide="post.showMore" ng-click="toggleShow(post)">Read less</h4>
      <div class="blog-text-two" ng-hide="post.showMore" ng-bind-html="post.fullStory">    
    </div>
</div>

Angular使用ng-repeat和ng-show - 如何展示一些但不展示其他人？

1 个答案: