javascript - 单击时显示和隐藏父 div 内的跨度无法按预期工作

Question

我的标记如下:

<div class="box" ng-click="listThis()" ng-show="isVisible">
 <span class="text">content ....</span>
 <span class="text2">content2 ....</span>
 <span class="text3">content3 ....</span>

我的代码如下:

var spans = 2;
var i = 0;
$scope.newlist= [];

while (i < spans){
$scope.newlist.push(i+1);
i++;
}

$scope.listThis=function(){
$scope.isVisible=!$scope.isVisible;
}

但是，当我点击/关闭 class="box"中的所有内容时，它会被隐藏，并且不会真正将我的跨度值限制为仅显示 2 个跨度。

现在确定我是否遗漏了什么，或者有更好的方法吗？

Answer 1

第一个答案很好地回答了你在 ng-show 上的问题。

根据您的评论，您可能希望使用带过滤器的 ng-repeat。

首先这是一个工作 plunker

HTML : ng-repeat - limit 是一个 $scope 变量。 “limitTo”过滤器返回列表的前 n 个元素。

<div>
    <span ng-repeat="span in spans | limitTo: limit">{{span.content}}<br/></span>
</div>

JS:

//Now your span elements are objects with the attribute "content"
$scope.spans = [{content:"Test1"},{content:"Test2"},{content:"Test3"}]

您可以使用 ng-model="limit" 将输入绑定(bind)到 limit。或者简单地在你的 JS 中执行 $scope.limit = 2

希望对您有所帮助。