Javascript 使用ng repeat和ng show的角度-如何显示一些而不是其他?
我用ng repeat来显示“n”个帖子。我想根据显示/隐藏单独显示post.trister或post.fullstory。这段代码根本不起作用。我所做的“最好”的事情就是让所有的帖子同时在“挑逗”和“完整故事”之间切换,但我还没有弄清楚如何独立完成。以下是我目前掌握的代码:Javascript 使用ng repeat和ng show的角度-如何显示一些而不是其他?,javascript,angularjs,Javascript,Angularjs,我用ng repeat来显示“n”个帖子。我想根据显示/隐藏单独显示post.trister或post.fullstory。这段代码根本不起作用。我所做的“最好”的事情就是让所有的帖子同时在“挑逗”和“完整故事”之间切换,但我还没有弄清楚如何独立完成。以下是我目前掌握的代码: <div class="w-row blog-row" ng-repeat="post in posts"> <div class="blog-block-one"> <h3 cl
<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;
};
{{post.title}
您需要将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>
$scope.toggleShow=函数(post){
post.showMore=!post.showMore;
};
在ng hide/ng show注释中,您将“状态”标识符放在那里。它到底是从哪里来的?您可能希望将其包含在您要迭代的对象中,以便可以将其用作:ng hide=“post.status”或something@amcpanaligan我认为这可能是正确步骤的一部分;早些时候,hide和show是post.showMore,但这对我来说也是一条死胡同。