.
106 Ionic Select
1) Start with startup codes.
And then, add demo codes.
HTML
<html>
<head> <meta charset="utf-8"> <title>Diary</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <!-- Internal Library <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> --> <!-- Cloud Library --> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="cordova.js"></script> </head> <body ng-app="app"> <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"> Select Item: <select ng-model="selectedItem" ng-options="item.id as item.name for item in listItems" ng-change="onchange(listItems[selectedItem])"> </select> </ion-content> </ion-view> </script> </body> </html> |
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
$scope.listItems = [
{ id: 0, name: 'One',value:100 },
{ id: 1, name: 'Two',value:200 },
{ id: 2, name: 'Three',value:300 }
];
$scope.selectedItem = $scope.listItems[2].id;
alert('Selected count ID: ' + $scope.selectedItem);
$scope.onchange = function(obj) {
alert("id:"+obj.id+" name:"+obj.name+" value:"+obj.value);
}
}])
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('home', {
url: '/page1',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
$urlRouterProvider.otherwise('/page1')
});
|
.
No comments:
Post a Comment