.
201 Ionic1 ng show hide elements
1) Begin with Startup Codes
2) Add basic VIEW and CONTROL codes
<html>
<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width"> <title></title> <!--local lib--> <!--<script src="lib/ionic/js/ionic.bundle.js"></script>--> <!--cloud lib--> <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above--> <!--<link href="css/ionic.app.css" rel="stylesheet">--> <!--local lib--> <!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">--> <!--cloud lib--> <link href="http://code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet"> <!--ionic custom styling--> <style> .platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px} </style> </head> <body ng-app="app" animation="slide-left-right-ios7" > <div> <div> <ion-nav-bar class="bar-stable"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </div> </div> <script id="home.html" type="text/ng-template"> <ion-view title="Home" id="page1"> <ion-nav-buttons side="left" class="has-header"> <button class="button icon ion-log-in" ng-click="doLogin()" ng-hide="loggedin"> Login</button> <button class="button icon ion-log-out" ng-click="doLogout()" ng-show="loggedin"> Logout</button> </ion-nav-buttons> <ion-nav-buttons side="right" class="has-header"> <button class="button button-icon icon ion-plus-circled" ng-click="showProjectModal()" ng-show="loggedin"></button> </ion-nav-buttons> <ion-content padding="true" class="has-header"> <div ng-hide="loggedin" style="text-align:center;font-size:600%;margin-top: 50%; left: 50%;"> <i class="icon ion-locked"></i> </div> <div ng-show="loggedin" style="text-align:center;font-size:600%;margin-top: 50%; left: 50%;"> <i class="icon ion-unlocked"></i> </div> </ion-content> </ion-view> </script> |
<script>
/*create js object app, bind to html app, use ionic framework*/ var app=angular.module('app',['ionic']); /******************************/ /*define CONTROLLERS & CONFIGS*/ /******************************/ /*define app.controller methods*/ app.controller('homeCtrl',['$scope',function($scope){ $scope.loggedin=false; $scope.doLogin=function(){$scope.loggedin=true} $scope.doLogout=function(){$scope.loggedin=false} }]); /*define app.config method*/ app.config(function($stateProvider,$urlRouterProvider){ $stateProvider.state('home',{url:'/page1',templateUrl:'home.html',controller:'homeCtrl'}); $urlRouterProvider.otherwise('/page1') }); /************************/ /*define SYSTEM SETTINGS*/ /************************/ app.config(function($ionicConfigProvider, $sceDelegateProvider){ $sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']); }) app.run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } }); }); /* This directive is used to disable the "drag to open" functionality of the Side-Menu when you are dragging a Slider component. */ app.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) { return { restrict: "A", controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { function stopDrag(){ $ionicSideMenuDelegate.canDragContent(false); } function allowDrag(){ $ionicSideMenuDelegate.canDragContent(true); } $rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag); $element.on('touchstart', stopDrag); $element.on('touchend', allowDrag); $element.on('mousedown', stopDrag); $element.on('mouseup', allowDrag); }] }; }]); /* This directive is used to open regular and dynamic href links inside of inappbrowser. */ app.directive('hrefInappbrowser', function() { return { restrict: 'A', replace: false, transclude: false, link: function(scope, element, attrs) { var href = attrs['hrefInappbrowser']; attrs.$observe('hrefInappbrowser', function(val){ href = val; }); element.bind('click', function (event) { window.open(href, '_system', 'location=yes'); event.preventDefault(); event.stopPropagation(); }); } }; }); </script> </body> </html> |
Outcome Preview
Live Demo
.
No comments:
Post a Comment