Using ng-show directive to toggle multiple elements? - angularjs

Question

Say I've got a <nav> element with three buttons, and an <article> containing three <section> elements. I want a user to be able to click a button, which toggles the display of all of the <section> elements in such a way that only the one relevant <section> is shown.
I'm new to AngularJS and trying to figure out if theres a more Angularly way of achieving this than by giving the nav elements ng-click attributes and the section elements the ng-show attribute. It feels very imperative.
My HTML would look something like this:
<nav>
<div ng-click="showRedSection()"></div>
<div ng-click="showBlueSection()"></div> //etc.
<nav>
<article>
<section ng-show="redSectionShown">
// content; etc.
</section>
//etc.
</article>
Am I on the right track, or is there an approach that makes this more declarative?

Answer 1

What you are going is correct.
Instead of needing a function to toggle the value on click you could do redSectionShown = !!redSectionShown
Or if you have a lot of sections and other data you want to store create a service to store the visible state of the regions and create directive that can toggle the values or use the values to hide elements.
The second approach reduces your $scope pollution.
.service('ViewableRegions', function() {
var viewablePropertiesMap = {};
this.getValue = function(value) {
return viewablePropertiesMap[value];
}
this.setValue = function(valueToUpdate, value) {
viewablePropertiesMap[valueToUpdate] = value
}
})
Directive to toggle region visability
.directive('regionToggler', function(ViewableRegions) {
return {
restrict: 'A',
compile: function($element, $attrs) {
var directiveName = this.name;
var valueToUpdate = attrs[directiveName];
return function(scope, element, attrs) {
element.on('click', function() {
var currentValue = ViewableRegions.getValue(ViewableRegions);
ViewableRegions.setValue(valueToUpdate, !!currentValue);
scope.$apply();
})
};
}
};
}
);
Directive to display the regions
.directive('regionDisplayer', function(ViewableRegions) {
return {
restrict: 'A',
compile: function($element, $attrs) {
var directiveName = this.name;
var valueToUpdate = attrs[directiveName];
return function(scope, element, attrs) {
scope.$watch(
function() {
return ViewableRegions.getValue(ViewableRegions);
},
function(newVal) {
if (newVal) {
element[0].style.display = "none";
} else {
element[0].style.display = "";
}
}
)
};
}
};
}
);
HTML Uasge
//etc.
<article>
<section region-displayer="redSectionShown">
// content; etc.
</section>
//etc.
</article>

Answer 2

I would actually recommend trying to use ng-hide as opposed to ng-show. These directives complete the same task most of the time,but ng-hide defaults to a hidden state, where you can then setup parameters in which the information will be shown. I ran into a similar problem with an app I was working on in angular, and using ng-hide seemed to help simplify the code in my view.

Answer 3

You could try something like:
<div ng-click="sectionToShow=1"></div>
<div ng-click="sectionToShow=2"></div>
<article>
<section ng-show="sectionToShow==1"></section>
</article>
I haven't tested this, but there's no reason it shouldn't work. That way, you will automatically only ever show the correct section, and all other sections will auto hide themselves.