Javascript 单击“未按预期工作”时显示和隐藏父div内的跨距

我的标记看起来像：

<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;
}

内容。。。。
内容2。。。。
内容3。。。。

我的代码如下所示：

<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;
}

var span=2；
var i=0；
$scope.newlist=[]；
while（i

但是，当我单击开/关时，class=“box”中的所有内容都会隐藏，并且不会真正限制我的跨度值，例如，仅显示2个跨度

---

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

这是因为您的ng秀在包含跨度的div上。因此，如果

isVisible

为false，则整个div及其所有内容都将隐藏。要更改此设置，应为每个跨度创建相应的显示/隐藏条件。 例如：

<div class="box">
    <span class="text" ng-click="listContentOne()" ng-show="oneIsVisible"></span>

---

这是您想要实现的非常简单和基本的版本，但是有了这些信息，您应该能够导出自己的解决方案。

这是因为您的ng show位于包含跨度的div上。因此，如果

isVisible

为false，则整个div及其所有内容都将隐藏。要更改此设置，应为每个跨度创建相应的显示/隐藏条件。 例如：

<div class="box">
    <span class="text" ng-click="listContentOne()" ng-show="oneIsVisible"></span>

---

这是一个非常简单和基本的版本，你想要实现什么，但有了这些信息，你应该能够得出自己的解决方案。

第一个答案是关于你在ng show上的问题的一个很好的答案

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

首先，这里是一个工作区

HTML: ng repeat-

limit

是一个$scope变量。“limito”过滤器返回列表的前n个元素

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

您可以使用

ng model=“limit”

将输入绑定到

limit

。或者只需在JS中执行

$scope.limit=2

---

希望能有所帮助。

第一个答案是关于您在ng show上的问题的一个很好的答案

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

首先，这里是一个工作区

HTML: ng repeat-

limit

是一个$scope变量。“limito”过滤器返回列表的前n个元素

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

您可以使用

ng model=“limit”

将输入绑定到

limit

。或者只需在JS中执行

$scope.limit=2

---

希望能有所帮助。

一个

ng repeat

可能更适合你。假设您的跨度设置有动态内容，如下所示：

$scope.spans = [
  {content: 'content1'},
  {content: 'content2'},
  {content: 'content3'}
]

那么您的html应该是这样的：

<span ng-repeat="span in spans">{{span.content}}</span>

否则，在span对象上放置另一个名为

visible

的变量，将其设置为true或false，然后执行以下操作

<span ng-repeat="span in spans" ng-show="span.visible">{{span.content}}</span>

{{span.content}

一个

ng repeat

可能更适合你。假设您的跨度设置有动态内容，如下所示：

$scope.spans = [
  {content: 'content1'},
  {content: 'content2'},
  {content: 'content3'}
]

那么您的html应该是这样的：

<span ng-repeat="span in spans">{{span.content}}</span>

否则，在span对象上放置另一个名为

visible

的变量，将其设置为true或false，然后执行以下操作

<span ng-repeat="span in spans" ng-show="span.visible">{{span.content}}</span>

{{span.content}

你能试着用小提琴来演示你的问题吗？我想你的问题不完整。你想限制什么？你也有遗漏的地方，我认为你对这个应该如何工作的想法是错误的。Angular会隐藏您正在隐藏的容器中的所有内容。我认为更好的方法是解释您正在尝试执行的操作，因为您的代码现在没有任何意义。我只是尝试隐藏span内容标记的数量。所以我想根据变量范围显示1、2或3。你能试着用小提琴演示你的问题吗？我想你的问题不完整。你想限制什么？你也有遗漏的地方，我认为你对这个应该如何工作的想法是错误的。Angular会隐藏您正在隐藏的容器中的所有内容。我认为更好的方法是解释您正在尝试执行的操作，因为您的代码现在没有任何意义。我只是尝试隐藏span内容标记的数量。所以我想根据变量跨度显示1、2或3。唯一的问题是，如果你不知道你的内容中有多少跨度，比如说你添加了第四个、第五个等等，除非你对每个跨度都有附加条件，否则它不会起作用，对吗？@Poiro你可能想使用ng repeat。不，但老实说，你的整个代码没有真正意义。您应该考虑重写它，并考虑一种使代码更加灵活的结构（例如，为每个包含内容的跨距使用一个对象，例如ID属性，然后使用ng repeat）。唯一的问题是，如果您不知道内容中有多少跨距，比如说添加第四个、第五个等，除非你对每一个都有附加条件，否则它不会起作用，对吗？@Poiro你可能想使用ng repeat。不，但老实说，你的整个代码没有真正意义。您应该考虑重写它，并考虑一种使代码更加灵活的结构（例如，为包含内容的每个跨度使用一个对象，例如ID属性，然后使用ng repeat）