i have a side-menu and i want to change the item of this side
eg: if user is connect ==> item my account is show
but if user is not connect ==>item my account is hide
in my controller:
facebookExample.controller("accueilController", function($scope, $cordovaOauth, $localStorage, $location,$ionicPopup,$state,$http) {
$scope.connect=true;
$localStorage.connect=true;
in the index.html :
<body ng-app="starter" ng-controller="accueilController" >
<ion-item class="item" nav-clear menu-close href="#/login" ng-show="connect=='true'">
<i class="fa fa-user" style="padding-right: 190px;"></i> <div style="padding-left: 25px;padding-top: 5px;">My account </div>
</ion-item>
i found nothing ,what can i do ,i use ng-if or ng-how and how ??
help me please
Try removing that check in the ng-show
<body ng-app="starter" ng-controller="accueilController" >
<ion-item class="item" nav-clear menu-close href="#/login" ng-show="connect">
<i class="fa fa-user" style="padding-right: 190px;"></i>
<div style="padding-left: 25px;padding-top: 5px;">My account</div>
</ion-item>
Related
I'm currently working on my first Ionic app and with it my first exposure to Angular. My current hurdle is injecting group headers ("A", "B", "C", and so on) into a longish list (~600) of alphabetically sorted names. I've looked into solutions with filters, nested ngRepeats (which, specifically, didn't seem to play nice with Ionic's collection-repeat), but would like to accomplish this without the need for filtering or third-party dependencies like lodash or underscores.
My current target solution is to use a directive to prepend the header to the first element of each group of names.
The app is consuming content from Contentful's API and in the service I'm manually adding a group identifier based on the name's first letter. An example data set might be:
[
{"id":"1","name":"Carrie","group":"C"},
{"id":"2","name":"Gabe","group":"G"},
{"id":"3","name":"Gerry","group":"G"},
{"id":"4","name":"Hector","group":"H"},
{"id":"5","name":"Hilbert","group":"H"}
]
Here's the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People" group-header>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Here's the directive:
.directive('groupHeader', function () {
return {
compile: function (element) {
element.prepend('<div class="item item-divider" is-divider>{{ person.group }}</div>');
}
}
})
And currently, as expected, the prepend occurs for each repeated item:
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">C</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/1" group="C">
<a class="item-content" ng-href="#/app/names/1" href="#/app/names/1">
<h2 class="ng-binding">Carrie</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">G</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/2" group="G">
<a class="item-content" ng-href="#/app/names/2" href="#/app/names/2">
<h2 class="ng-binding">Gabe</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
I'd like to know if there are any recommendations for updating the directive so that it only prepends on the first instance of name in a given group. I'm happy to be pointed to resources, rather than a longhand solution--but either will be much appreciated.
Thanks!
I was able to accomplish what I was after with an ng-switch in the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People">
<ng-switch on="$first || person.group != People[$index-1].group">
<ion-item type="item-text-wrap" ng-switch-when="true">
{{ person.group }}
</ion-item>
</ng-switch>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Thanks to: https://stackoverflow.com/a/14076254/3426040.
When I refer the item individualy on angularJS it works fine, but in collection not work.
This colletcion not working in my ionic project, anyone knows what is wrong ?? thanks !
//JavaScript part
//HTML part
MapApp.controller('MenuCtrl', function($scope) {
$scope.itens = [
{titulo: 'Mapa'},
{titulo: 'Login'},
{titulo: 'Sobre'}
];
$scope.TituloMenu = 'Menu';
//$scope.currItens = $scope.itens;
});
<!-- NOT WORK -->
<ion-item nav-clear menu-close href="#/map/login"
collection-item-height="52" collection-repeat"item in itens" class="item item-icon-left"
item-height="250" item-width="100%">
<i class="icon ion-chevron-right"></i>{{item.titulo}}
</ion-item>
<!-- IT WORK -->
<ion-item nav-clear menu-close href="#/map/login" class="item item-icon-left" >
<i class="icon ion-ios-arrow-right"></i>{{itens[0].titulo}}
</ion-item>
<ion-item nav-clear menu-close href="#/map/login" class="item item-icon-left" >
<i class="icon ion-ios-arrow-right"></i>{{itens[1].titulo}}
</ion-item>
<ion-item nav-clear menu-close href="#/map/login" class="item item-icon-left" >
<i class="icon ion-ios-arrow-right"></i>{{itens[2].titulo}}
</ion-item>
You are missing an equals sign in the html.
collection-repeat"item in itens"
collection-repeat="item in itens"
I am working on this app where i want menu + tabs for..
i have seen on one example on codepen and try to implement it ..here's the link "look for second seaction"
http://codepen.io/kmartinezmedia/pen/mFdkB
but its not working the way it suppose to be ..
I am using the page below as one tab and the same page with different content on another tab and I want no animation to give a feel that only the content has changed.
I think if there is any way i can remove the animation from this view , it will work....
or any other way to do that,....i am trying to fix this from 6 hrs ,
<ion-view class="tech-view" ng-controller="hrlDetailCtrl" view-title="C Language">
<ion-nav-bar class="bar-balanced big-bar" animation="no-animation" >
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<div class="tabs-background-balanced tabs-color-light" style="padding:0px;margin:0px;" >
<div class=" bar bar-subheader tabs tabs-icon-top" style="box-shadow: 0 2px 5px rgba(0,0,0,.26);">
<a nav-clear class="tab-item disable-user-behavior active" title="Home" nav-clear ui-sref="app.c">
<i class="icon ion-ios-book "></i>
Topic
</a>
<a nav-clear class="tab-item disable-user-behavior" title="Chat" nav-clear ui-sref="app.cpro">
<i class="icon ion-code"></i>
Programs
</a>
<a nav-clear class="tab-item disable-user-behavior" title="Drink" nav-clear ui-sref="app.cques">
<i class="icon ion-document-text"></i>
Ques / Ans
</a>
</div>
</div>
<ion-content class="padding spc-from-subheader" name="tabContent" animation="no-animation">
<div ng-controller="hrlistCtrl">
<div class="sub-topics-list" ng-repeat="hrl in hrlist | limitTo: 29 | limitTo: -14" class="my-item item-icon-left">
<a class="item item-icon-right " animation="no-animation" href="#/app/ct/{{hrl.id}}" style="border-width:0;border-style:none;background-color:#1E824C;">
<div class="has-border">
<h3 style="background-color:#1E824C;color:white">{{hrl.title}}</h3>
</div>
<i class="icon ion-ios-arrow-right"> </i>
</a>
</div>
</div>
</ion-content>
This works in Ionic 1.3.20.
angular.module('YOUR_APP_NAME_HERE').config(function($ionicConfigProvider) {
$ionicConfigProvider.views.transition('none');
});
http://ionicframework.com/docs/api/provider/$ionicConfigProvider#views.transition
Try using the config to disable:
$ionicConfigProvider.navBar.transition('none');
I'm writing a small ionic app and have an issue. I'm using a sidemenu and also tabs. I have an ionic slide-box in one of my views, when I wipe this slidebox from left to right the side menu slides out. I've read through various related topics on the ionic forum but none have worked.
I've tried adding drag-content="false" to various tags and also added $ionicSideMenuDelegate.canDragContent(false); to my controller.
Neither worked. I think it's because I'm using a sidemenu, with tabs and views in the tabs. Heres my code:
index.html
<ion-side-menus>
<!-- Header bar -->
<ion-side-menu-content ng-controller="NavCtrl" drag-content="false">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<!-- Page content -->
<ion-nav-view drag-content="false" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Side menu -->
<ion-side-menu side="left" class="side-menu">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<div ng-if="authData.twitter" class="logged-in-user item item-avatar">
<img ng-src="{{authData.twitter.cachedUserProfile.profile_image_url}}"/>
<h2>Hello, {{authData.twitter.displayName}}</h2>
<p>Logged in via Twitter</p>
</div>
<div ng-if="authData.facebook" class="logged-in-user item item-avatar">
<img ng-src="{{authData.facebook.cachedUserProfile.picture.data.url}}"/>
<h2>Hello, {{authData.facebook.displayName}}</h2>
<p>Logged in via Facebook</p>
</div>
<ul class="list">
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/venue">
<i class="icon ion-ios7-location"></i>Venue
</a>
</li>
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/lunch">
<i class="icon ion-pizza"></i>Lunch
</a>
</li>
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/wifi">
<i class="icon ion-wifi"></i>Wifi
</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-dark">
<button class="button button-icon icon ion-log-out menu-close nav-clear" ng-controller="LoginCtrl" ng-click="logout()"> Logout</button>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
and my view:
<ion-view title="Agenda">
<ion-content drag-content="false">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="header-card header-card--image">
<div class="overlay">
<div class="item item-text-wrap">
<h3 class="header-card__heading">Happening now</h3>
<img ng-src="img/me.jpeg" class="header-card__avatar"/>
<h2 class="header-card__heading">some guy</h2>
<p class="header-card__text">Some title</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="header-card header-card--image">
<div class="overlay">
<div class="item item-text-wrap">
<h3 class="header-card__heading">Coming Next</h3>
<img ng-src="img/me.jpeg" class="header-card__avatar"/>
<h2 class="header-card__heading">Some guy</h2>
<p class="header-card__text">Slowly taking over the world</p>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
<ion-list>
<ion-item ng-repeat="(id,agendaItem) in agendaItems" type="item-text-wrap" href="#/tab/agendaItem/{{agendaItem.$id}}" class="item item-avatar item-with-grid">
<img ng-src="{{agendaItem.image}}">
<p>{{agendaItem.startTime}} <i ng-if="agendaItem.hasNotificationSet == true" class="icon-left ion-ios7-bell"></i></p>
<h2>{{agendaItem.title}}</h2>
<p>{{agendaItem.speaker}}</p>
<ion-option-button ng-class="agendaItem.hasNotificationSet ? 'button-balanced icon ion-ios7-bell' : 'button-positive icon ion-ios7-bell-outline'" ng-controller="NotificationCtrl" ng-click="add(agendaItem)"></ion-option-button>
<!--<ion-option-button ng-click="getNotificationIds()"></ion-option-button>-->
</ion-item>
</ion-list>
</ion-content>
and my controller:
.controller('AgendaCtrl', function($scope, AgendaFactory, $ionicSideMenuDelegate, $rootScope, $ionicPopup, $timeout, $cordovaLocalNotification, NotificationFactory) {
$ionicSideMenuDelegate.canDragContent(false); // doesn't seem to work
var agendaItems = AgendaFactory.getAgenda();
// Loop through agenda itens and check which have notifications set
agendaItems.$loaded().then(function(array) {
angular.forEach(array, function(value, key) {
if (NotificationFactory.isNotificationScheduled(value.notificationId) == true) {
value.hasNotificationSet = true;
} else {
value.hasNotificationSet = false;
}
});
$scope.getNotificationIds = function () {
$cordovaLocalNotification.getScheduledIds().then(function (scheduledIds) {
console.log(scheduledIds);
});
};
$scope.agendaItems = agendaItems;
});
$scope.firstTimeLogin = $rootScope.firstTimeLogin;
})
I'm using something like this on my app:
.controller('AgendaCtrl', function($scope, $ionicSideMenuDelegate){
$scope.$on('$ionicView.enter', function(){
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function(){
$ionicSideMenuDelegate.canDragContent(true);
});
})
now, when you leave the view it's draggable again.
ion-side-menu-content drag-content="false" put this code in your ion-sidemenu's ion-pane tag
<ion-side-menus>
<ion-side-menu-content drag-content="false">
............
</ion-side-menu-content>
</ion-side-menus>
this is sample code follow #Chetan Buddh's answer
Here is my link http://codepen.io/sanand29/pen/mKkvw
<html ng-app="ionicApp">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.8/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.8/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view class="pane"></ion-view>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon icon ion-navicon-round"
menu-toggle="left"
></button>
<h1 class="title">Welcome</h1>
</ion-header-bar>
<ion-list>
<ion-item href="#/tab/admission-information" class="item item-icon-right ">
Admission-Information
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item href="#/tab/contacts" class="item item-icon-right ">
Contacts
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item href="#/tab/program-details" class="item item-icon-right ">
Program details
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item href="#/tab/tution-fees" class="item item-icon-right ">
Tution fees
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item href="#/tab/financial-aids" class="item item-icon-right ">
Financial Aids
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item href="#/tab/faqs" class="item item-icon-right ">
FAQs
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left menu</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});</script>
the navigation bars that i have given, on clicking them its not sliding from left to right. I have given the slider class correctly i think,,I can't find out my fault. Kindly show in fiddle or code pen. Any help would be appreciated
If you want to get the view to slide in when a tab is clicked you should use an animation class on an ion-nav-view.
If you want to get the view to slide in when the user slides across the view you should use an ion-slide-box