How can I change subheader content dynamically?


#1

Hi! I’m trying to change the content of a subheader dynamically with a select. Here’s my code:

<div ng-controller="LibraryController">
    <div class="bar bar-subheader azul">
        <h2 class="title ion-ios7-calendar-outline">{{currentMonth}}</h2>
    </div>
    <ion-content class="has-header has-subheader">
        <p>{{currentMonth}}</p>
        <div class="select_fecha_row">
            <div class="row">
                <div class="col">
                    <select ng-model="currentMonth" ng-options="month for month in months">
                    </select>
                </div>
            </div>
    </div>
    </ion-content>        
</div>

Everytime I select a new month, the content of the p element changes but it doesn’t change in the subheader. Anyone knows how to change the subheader content dynamically?

Thanks!


#2

use ng-change on the select-node.

call a function that triggers an angular event
$scope.$emit('changeContent', currentMonth);

in a parent controller or your base controller you can listen on that event.

$scope.$on('changeContent', function (event, currentMonth) {
  $scope.currentMonth = currentMonth;
});

#3

Hi, thanks for your answer. I’ve tried what you say but it still doesn’t work. Here’s what I’ve done:

In the select node:

<select ng-model="currentMonth" ng-options="month for month in months" ng-change="changeMonth(currentMonth)" ></select>

The controller that triggers the angular event:

    .controller("LibraryController", function($scope){
         $scope.months = ["Noviembre 2014", "Octubre 2014", "Septiembre 2014", "Agosto 2014", "Julio 2014", "Junio 2014", "Mayo 2014"];
        $scope.currentMonth = $scope.months[0];
        $scope.changeMonth = function(optionSelected){
             $scope.$emit("changeMonth", optionSelected);
        }
}

And finally, in the parent controller I listen to that event:

.controller('AppController', function($scope) {
     $scope.$on('changeMonth', function (event, currentMonth) {
        $scope.currentMonth = currentMonth;
    });
}

I still don’t understand why the content of the subheader isn’t changing despite the event is working and it’s registering the month selected…

Thanks again!


#4

Hey i have build a little code-pen with last build:

using ion-view and ion-navbar to set generic title


#5

Hi bengtler, that is not exactly what I’m trying to accomplish…I want to do that but in the sub-header. I built a code-pen recreating my problem. Perhaps I should’ve done this since the beggining, sorry.

Thank you for your help


#6

I tried ur codepen
Change this
$scope.$emit(“changeMonth”, optionSelected);

to
$scope.currentMonth =optionSelected;

It will work

See the Pen Change sub-header content dynamically


#7

Thank you so much! Now it works :slight_smile: