Angular show/hide static html?

Question

I've got a site where I want to be able to display services. There's already well-formatted html code to describe each service, and I want to use the already made code.

I only want one service's description to appear at a time (one I've already denoted as being default). When you click on the service category, it should hide all other descriptions and then show only an assigned html element.

I imagine I'm completely overthinking this, and there really is a simple way to do it.

What I don't want to do is put all the html code the designer worked on into the scope. that means having to make a javascript string of html code, which is just ugly.

I'm trying to do anything at this point...

$scope.services =   [{  
            "id":"music",
            "label":"Music",
            "show":false
        },
        ...
        ];
$scope.showElement = function(service){
    $scope.hideAll(); //sets all services "show" var to "false"
    return service.show = true;
};

$scope.getServiceByElementId = function(id){
    for (var i=0; i<$scope.services.length; i++){
        var service = $scope.services[i];
        if (id==service.id){
            return service;
        }
    }
};

The html part looks like this:

<span ng-repeat="service in services">
        <span id="{{service.id}}">
            <a href="#" ng-click="showElement(service)">
                {{service.label}}
            </a>
        </span>
        <span ng-show="! $last"> | </span>
    </span>
...end category menu

    <span ng-show="{{getServiceByElementId('music').show}}">
        <p>premade html code that anyone can edit for music</p>
    </span>

    <span ng-show="{{getServiceByElementId('voip').show}}">
        <p>premade html code that anyone can edit for voip</p>
    </span>

    <span ng-show="{{getServiceByElementId('websites').show}}">
        <p>premade html code that anyone can edit for websites info</p>
    </span>

    <span ng-show="{{getServiceByElementId('svn').show}}">
        <p>premade html code that anyone can edit for svn repository info</p>
    </span>

So far, I'm noticing this is getting REALLY complicated for something so simple, so clearly I'm doing something VERY wrong... what am I missing? I'm not having a lot of luck finding any tutorial that explains how angular can turn static html elements on and off...

http://jsfiddle.net/udQSc/

In knowing what it is that I'm TRYING to do, please let me know if I'm traveling down the wrong path so I can get back on the right one :)

how large is the <p>premade html code that anyone can edit for voip</p> chunks of code? if they are relatively small @rob's approach would work. If they are larger you could break them into separate pieces and use routing to change the view. — Jared Reeves
– Jared Reeves, Commented Apr 17, 2014 at 19:37
the html i was using actually fluctuates... some of 'em are pretty small, but most are pretty large. — Edge D-Vort
– Edge D-Vort, Commented Apr 17, 2014 at 21:23

rob · Accepted Answer · 2014-04-17 19:16:13Z

4

You could simplify things a bit with ng-switch

<div ng-switch on="activeService">
    <span ng-switch-when="music">
        <p>premade html code that anyone can edit for music</p>
    </span>

    <span ng-switch-when="voip">
        <p>premade html code that anyone can edit for voip</p>
    </span>

    <span ng-switch-when="websites">
        <p>premade html code that anyone can edit for websites info</p>
    </span>

    <span ng-switch-when="svn">
        <p>premade html code that anyone can edit for svn repository info</p>
    </span>
</div>

http://jsfiddle.net/robianmcd/7YGUR/

answered Apr 17, 2014 at 19:16

rob

18.7k13 gold badges73 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jared Reeves Over a year ago

It should be noted that the ng-switch creates a new scope, if writing to the inner scope, the outer scope value does not get updated. Can be an issue with model, unless an object is used refer to fields.

Edge D-Vort Over a year ago

This actually is the answer to what I was trying to do, but upon looking at what I was doing, the other answer actually was a bit more dynamic. My html content was rather large, so breaking them up into separate html files was actually a better idea. BUT, I still like this answer a lot, and I still find it very useful. Thank you for your help :)

Alex · Accepted Answer · 2014-04-17 19:24:54Z

1

You can store html 'chunks' in separate files and import them using ng-include.

For example, if you have your html for music in /templates/music.html, and your template for svn in /templates/svn.html etc, you can use

<ng-include src="'/templates/' + serviceName + '.html'" />

When you change scope.serviceName, the template will update.

answered Apr 17, 2014 at 19:24

Alex

7,9993 gold badges48 silver badges61 bronze badges

1 Comment

Edge D-Vort Over a year ago

This answer is more dynamic imo, because you're not required to hard-code any kind of name or condition into your html to get the right box to show up. It also further modularizes the design.

Collectives™ on Stack Overflow

Angular show/hide static html?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related