Ionic Enlarge Font Size - angularjs

Question

I've seen it on several apps, but can't seem to figure it out. I simply want to place a icon for font (with + and -) where the user clicks it, it will enlarge the font size or decrease it.

Answer 1

Working plunker.
controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
$scope.size = 14;
$scope.fontSize = "font-size-" + $scope.size;
$scope.increase = function(){
//Higher limit
if($scope.size < 18){
$scope.size++;
$scope.fontSize = "font-size-" + $scope.size;
}
};
$scope.decrease = function(){
//Lower limit
if($scope.size > 14){
$scope.size--;
$scope.fontSize = "font-size-" + $scope.size;
}
};
});
tab-dash.html
<ion-view view-title="Dashboard">
<ion-content class="padding" ng-class="fontSize">
<button class="button" ng-click="increase()"><i class="ion-plus-round"></i></button>
<button class="button" ng-click="decrease()"><i class="ion-minus-round"></i></button>
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
</ion-view>
style.css
.font-size-14 *{
font-size: 14px;
}
.font-size-15 *{
font-size: 15px;
}
.font-size-16 *{
font-size: 16px;
}
.font-size-17 *{
font-size: 17px;
}
.font-size-18 *{
font-size: 18px;
}
I added the lower and higher limits so an user can't go over these two font-sizes.