Thursday, April 5, 2018

201 Ionic1 ng show hide elements

201 Ionic1 ng show hide elements



.

201 Ionic1 ng show hide elements

1) Begin with Startup Codes

Refer http://programming-steps.blogspot.my/2017/06/102a-ionic-single-page-app-spa-blank.html

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

.



visit link download
Posted by at

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)