I’m new to Ionic and i’m having an issue in displaying tabs content in iOS version. It displays correctly in Android version.
This is section of app.js file
.state('app.menu', {
url: '/menu',
views: {
'mainContent' : {
templateUrl: "templates/menu.html",
controller: 'MenuController'
}
}
})
Here is my menu.html file
<ion-view view-title="Menu">
<ion-content>
<ion-list>
<ion-item ng-repeat="dish in dishes | filter:{category: filtText}" href="#/app/menu/{{dish.id}}" class="item-thumbnail-left">
<img ng-src="{{baseURL+dish.image}}">
<h2>{{dish.name}}
<span style="font-size:75%">{{dish.price | currency}}</span>
<span class="badge badge-assertive">{{dish.label}}</span></h2>
<p>{{dish.description}}</p>
<ion-option-button class="button-assertive icon ion-plus-circled" ng-click="addFavorite({{dish.id}})"></ion-option-button>
</ion-item>
</ion-list>
<div class="tabs-striped tabs-color-royal">
<div class="tabs">
<li ng-class="{active:isSelected(1)}" class="tab-item">
<a ng-click="select(1)">The Menu</a></li>
<li ng-class="{active:isSelected(2)}" class="tab-item">
<a ng-click="select(2)">Appetizers</a></li>
<li ng-class="{active:isSelected(3)}" class="tab-item">
<a ng-click="select(3)">Mains</a></li>
<li ng-class="{active:isSelected(4)}" class="tab-item">
<a ng-click="select(4)">Desserts</a></li>
</div>
</div>
</ion-content>
</ion-view>
Here is my controller. I think there must be something wrong in menu.html. But still, here is my controllers.js section for MenuController.
.controller('MenuController', ['$scope', 'menuFactory', 'baseURL', 'favoriteFactory', '$ionicListDelegate', function($scope, menuFactory, baseURL, favoriteFactory, $ionicListDelegate) {
$scope.baseURL = baseURL;
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
$scope.showMenu = false;
$scope.message = "Loading ...";
menuFactory.getDishes().query(
function(response) {
$scope.dishes = response;
$scope.showMenu = true;
},
function(response) {
$scope.message = "Error: "+response.status + " " + response.statusText;
});
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
}])
can someone please help me fix this? I tried to post it in different forums but no response.
Thank you very much for all responses.
