Sidemenu access ionic - angularjs

Controller.js:
.controller('ParametresCtrl',['$scope','$stateParams','$state','cgtdata','$ionicPopup',
function($scope,$stateParams,$state,cgtdata,$ionicPopup) {
document.getElementById('test').style.color='red';
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Tiime-ae</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<!--<ion-item menu-close ng-click="login()">
Login
</ion-item>-->
<ion-item menu-close href="#/app/home">
Home
</ion-item>
<ion-item menu-close href="#/app/registre">
registre
</ion-item>
<ion-item menu-close href="#/app/documents">
Documents
</ion-item>
<ion-item menu-close href="#/app/facturer">
Facturer
</ion-item>
<ion-item menu-close href="#/app/parametres">
Paramètres
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
parametres.html:
<ion-view view-title="Parametres">
<ion-nav-buttons side="right">
<div class="h1 title">Header Buttons</div>
<button id="test" class="button button-clear button-positive">Edit</button>
</ion-nav-buttons>
<ion-content>
<h2>Mon Compte</h2>
<ul class="list">
<li class="item">
<p class="param-right">{{email}}</p><p>Email :</p>
</li>
<li class="item" ng-click="changepass()">
<div class="chevron-mdp ion-chevron-right" data-pack="default" data-tags="arrow,right"></div>
<p>Modifier mon mot de passe : </p>
</li>
</ul>
<h2>Activité</h2>
<ul class="list">
<li class="item">
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked"
ng-checked="item.checked">
{{ item.text }}
</ion-toggle>
</li>
</ul>
<h2 id="edit">Mon entreprise</h2>
<ul class="list">
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Période de déclaration
</div>
<select>
<option>Mensuelle</option>
<option>Trimestrielle</option>
</select>
</label>
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Bénéficiaire ACCRE
</div>
<select>
<option>Oui</option>
<option>Non</option>
</select>
</label>
</div>
<li class="item">
<input ng-change="firstchange()" ng-model="nam" class="param-right"></input><p>Prénom</p>
</li>
<li class="item">
<p class="param-right">{{lastname}}</p><p>Nom</p>
</li>
<li class="item">
<p class="param-right">{{commercial}}</p><p>Nom Commercial</p>
</li>
<li class="item">
<p class="param-right">{{siret}}</p><p>Siret</p>
</li>
<li class="item">
<p class="param-right">{{creation}}</p><p>Date de création</p>
</li>
<li class="item">
<p class="param-right">{{addresse}}</p><p>Addresse</p>
</li>
<li class="item">
<p class="param-right">{{cp}}</p><p>Code postal</p>
</li>
<li class="item">
<p class="param-right">{{city}}</p><p>Ville</p>
</li>
<li class="item">
<p class="param-right">{{country}}</p><p>Pays</p>
</li>
<li class="item">
<p class="param-right">{{phone}}</p><p>Téléphone</p>
</li>
<li class="item">
<p>Ville d'imatriculation au RCS :</p>
</li>
</ul>
<h2>Factures</h2>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Délai de réglement
</div>
<select>
<option>A la réception</option>
<option>une semaine</option>
<option>15 jours</option>
<option>3 semaines</option>
<option>30 jours</option>
<option>40 jours</option>
<option>45 jours</option>
<option>60 jours</option>
</select>
</label>
</div>
<li class="item" ng-click="entete()">
<div class="chevron-mdp ion-chevron-right" data-pack="default" data-tags="arrow,right"></div>
<p>En tête</p>
</li>
<li class="item" ng-click="mentions()">
<div class="chevron-mdp ion-chevron-right" data-pack="default" data-tags="arrow,right"></div>
<p>Mentions légales</p>
</li>
<li class="item" ng-click="piedpage()">
<div class="chevron-mdp ion-chevron-right" data-pack="default" data-tags="arrow,right"></div>
<p>Pied de page</p>
</li>
</ul>
<div class="button-bar bar-assertive">
<a class="button activated" ng-click="showConfirm()">Deconnexion</a>
</div>
</ion-content>
</ion-view>
I m new in angular, here is my issue :
My controller.js is link to my parametres.html
and i have the following error : TypeError: Cannot read property 'style' of null
Because i would like to use css on my button "edit" from my controller. So i put my button into parametres.html.
<ion-view view-title="Parametres">
<ion-nav-buttons side="right">
<div class="h1 title">Header Buttons</div>
<button id="test" class="button button-clear button-positive">Edit</button>
</ion-nav-buttons>
<ion-content>
Because what i want to do is : with ng-change when i change something in parametres.html like a value, my button "edit" appear.
Someone knows how i can access to css property of a my button "edit" from controller which is not in ion-content ?

ok i just use this :
<button ng-style="displayed" class="button button-clear button-positive">Edit</button>
and in my controller : $scope.displayed = {'color':'red'};
i didn t know that ng-class existed !
And it works !

Related

Ionic navigation controllers

I need to have three types of navigation in my Ionic app. Is there anything that I can do to minimize my code?
Main problem: All three navigation has the same side menu, but different header navigation.
My code for first navigation:
<ion-side-menus>
<ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar-traveler">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title class="heder-tabs">
<div class="heder-avatar">
<a >
<img src="img/default-avatar.png">
</a>
<div class="karma-box-heder">1243</div>
</div>
<span><a >Travel</a></span>
<span><a >Location</a></span>
<span><a >Networking</a></span>
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view class="has-header"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right" class="has-header-nav">
<ion-content class="navigation-bg-color">
<ion-list class="app-right-navigation">
<ion-item class="side-navigation-user sidenav-box" menu-close href="">
<div class="user-nav">
<div class="user-sidenav-logo">
<img src="img/default-avatar.png">
<div class="karma-box">1243</div>
</div>
<div class="first-three-nav-choice">User Name</div>
</div>
</ion-item>
<ion-item class="side-navigation-pinko sidenav-box" menu-close href="">
<div class="pinko-nav">
<div class="pinko-sidenav-logo">
<img src="img/pro4travel-logo.png">
</div>
<div class="first-three-nav-choice">Pinko</div>
</div>
</ion-item>
<ion-item class="side-navigation-club sidenav-box" menu-close href="">
<div class="club-nav">
<div class="club-sidenav-logo">
<img src="img/app4travel-logo.png">
</div>
<div class="first-three-nav-choice">Club</div>
</div>
</ion-item>
<ion-item class="other-nav-text" menu-close href="">
<div class="icon-navigation"><i class="fa fa-th-large" aria-hidden="true"></i></div>
<div class="text-nav-list">My Agency</div>
</ion-item>
<ion-item class="other-nav-text" menu-close href="">
<div class="icon-navigation"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></div>
<div class="text-nav-list">My Karma</div>
</ion-item>
<ion-item class="other-nav-text" menu-close href="">
<div class="icon-navigation"><i class="fa fa-bullhorn" aria-hidden="true"></i></div>
<div class="text-nav-list">Notification</div>
</ion-item>
<ion-item class="other-nav-text" menu-close href="">
<div class="icon-navigation"><i class="fa fa-user-circle" aria-hidden="true"></i></div>
<div class="text-nav-list">Profile</div>
</ion-item>
<ion-item class="other-nav-text" menu-close href="">
<div class="icon-navigation"><i class="fa fa-cog" aria-hidden="true"></i></div>
<div class="text-nav-list">Settings</div>
</ion-item>
<ion-item class="other-nav-text" menu-close href="">
<div class="icon-navigation"><i class="fa fa-sign-out" aria-hidden="true"></i></div>
<div class="text-nav-list">Log out</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
So Box1 on picture is the box that containts my Header navigation(navigation that needs to be diffrent on other two navigation)
And Box2 on picture is box thats stays the same.
Aslo here is picture how to looks in my app:
So depent on what page is the box1 need to be changed and box2 needs to stay the same.

How can i remove animation from few ion view

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');

Disable swipe to view sidemenu when using tabs

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

AngularJs how to hide item-divider which hasn't items

How may I hide a item-divider which no has list-items when I'm using the filter? This is the code:
<div ng-repeat="elem in codeList | orderBy:predicate:reverse">
<div class="item item-divider">
{{elem.data}}
</div>
<ul class="list">
<li class="item item-icon-right" ng-repeat="item in elem.array | filter:search" ng-click="action(item)">
<h2>{{item.text}}</h2>
<i class="icon ion-{{item.icon}}"></i>
</li>
</ul>
</div>
I would like to know how to do it in "Angular way".
You'll need to alias your filtered list with as filteredItems (works with Angular 1.3) and use the filteredItems.length to conditionally show/hide your item-divider.
<div ng-show="filteredItems.length" class="item item-divider">
{{elem.data}}
</div>
<ul class="list">
<li class="item item-icon-right"
ng-repeat="item in elem.array | filter:search as filteredItems"
ng-click="action(item)">
<h2>{{item.text}}</h2>
<i class="icon ion-{{item.icon}}"></i>
</li>
</ul>
I would go for ng-hide
<div class="item item-divider" ng-hide="elem.array.length == 0">
{{elem.data}}
</div>

Left to right slider is not working

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

Resources