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 :)

Answer 1

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/

Answer 2

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.