sara
November 7, 2014, 12:18pm
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!
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;
});
sara
November 14, 2014, 9:02am
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!
Hey i have build a little code-pen with last build:
using ion-view and ion-navbar to set generic title
sara
November 24, 2014, 4:46pm
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
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
1 Like
sara
November 25, 2014, 8:40am
7
Thank you so much! Now it works