Angular ng-show doesn't seem to be working properly

Question

I have a range of divs which need to be displayed depending on whether a variable is true or false. The code for the divs are as follows:

<div ng-show="pages.quantity"></div>
<div ng-show="pages.frontSelect"></div>

and a button which should toggle whether they are shown or not

 <a class="personalise" ng-click="updatePage('quantity','frontSelect')">
 <p>Personalise Front <i class="fa fa-caret-right"></i></p></a>

The updatePage function is as follows:

$scope.updatePage = function (hide, show) {
        switch (show) {
            case "frontSelect":
                $scope.pages.frontSelect = true;
                break;
        }

        switch (hide) {
            case "quantity":
                $scope.pages.quantity = false;
                break;
        }


    }

When I click the button, the first div disappears, but the second div does not appear.

I cannot work out why the second div does not appear on click. Can anyone assist? Through debugging, I can see that the values are indeed changed to false / true respectively, but the second div does not appear.

Please note there will be a series of div's not just two, which is why the function is set up as it is, and will be expanded on.

Answer 1

On the assumption that you have already defined $scope.pages before you attempt to set a sub key, it should work.

If you try to set properties of $scope.pages before it has been defined, you will simply get an error and the desired functionality will not work.

Demo Fiddle

HTML

<div ng-controller="MyCtrl">
    <div ng-show="pages.quantity">quantity</div>
    <div ng-show="pages.frontSelect">frontSelect</div> <a class="personalise" ng-click="updatePage('quantity','frontSelect')">
 <p>Personalise Front <i class="fa fa-caret-right"></i></p></a>

</div>

Angular:

var myApp = angular.module('myApp', []);    
function MyCtrl($scope) {
    $scope.pages = {}; /* <---- variable defined */ 
    $scope.updatePage = function (hide, show) {
        switch (show) {
            case "frontSelect":
                $scope.pages.frontSelect = true;
                break;
        }    
        switch (hide) {
            case "quantity":
                $scope.pages.quantity = false;
                break;
        }    
   }
}

---

If you want the buttons to act as a toggle, you can change your Angular code to:

Demo Fiddle

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.pages = {
        frontSelect:false,
        quantity:true
    };    
    $scope.updatePage = function (hide, show) {
        switch (show) {
            case "frontSelect":
                $scope.pages.frontSelect = !$scope.pages.frontSelect;
                break;
        }
        switch (hide) {
            case "quantity":
                $scope.pages.quantity = !$scope.pages.quantity;
                break;
        }
    }
}