.
109D Ionic1 Form Select
Notes
Ionic Select will create a simple menu with select options for the user to choose. This Select Menu will look differently on different platforms, since its styling is handled by the browser.
Source 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-content padding="true" class="has-header">
<form class="list">
<label class="item item-select">
<span class="input-label">Select</span>
<select ng-model="selectedItem" ng-options="item.id as item.name for item in listitems"></select>
</label>
</form>
<button ng-click="" class="button button-positive button-block">Tap me!</button>
<p>{{selectedItem}}</p>
<p>{{listitems[selectedItem]}}</p>
</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',function($scope){
$scope.listitems = [{
id: 0,
name: 'getfreespace',
desc: '-'
},
{
id: 1,
name: 'checkdir',
desc: '-'
},
{
id: 2,
name: 'checkfile',
desc: '-'
},
{
id: 3,
name: 'createdir',
desc: '-'
},
{
id: 4,
name: 'createfile',
desc: '-'
},
{
id: 5,
name: 'removedir',
desc: '-'
},
{
id: 6,
name: 'removefile',
desc: '-'
} ];
$scope.selectedItem = null;
});
/*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>
|
Reference
Demo
See the Pen 109D Ionic1 Form Select by notarazi (@notarazi) on CodePen.
.
No comments:
Post a Comment