在单击时显示和隐藏父div内的跨度无法正常工作

Question

My markup looks like:

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

My code looks like:

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

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

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

However when I click on / off everything within class="box" is hidden and doesn't really take my spans value to limit, say, 2 spans are shown only.

Now sure if I've missed anything out, or a better way of doing this?

Answer 1

This is because your ng-show is on your div which contains the spans. So if isVisible is false, the entire div and all its content is hidden. To change this you should create conditions for each span, which show/hide accordingly. For example:

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

And in your controller:

$scope.listContentOne = function() {
    $scope.oneIsVisible = !$scope.oneIsVisible;
}

This is a very simple and basic version of what you want to achieve, but with this information you should be able to derive your own solution.

Answer 2

The first answer is a good answer about your issue on ng-show.

According to your comments you may want to use a ng-repeat with a filter.

First here is a working plunker

HTML : The ng-repeat - limit is a $scope var. the "limitTo" filter return the n first elements of the list.

<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"}]

You can bind an input to limit with ng-model="limit" . Or simply doing $scope.limit = 2 in your JS

Hope it helped.

Answer 3

An ng-repeat is probably more what you're looking for. Assuming you have dynamic content for your spans setup like so:

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

Then your html should be like this:

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

From there you have a few options depending on what you want to do. If your spans are sorted and you just want to show a certain amount, add $scope.limit somewhere and use limitTo :

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

Otherwise put another variable on the span objects called visible , set that to true or false, and then do

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