Advanced Search

fetch drop down values from API using ionic

/ Published in: iPhone
Save to your folder(s)
Cross platform development is usually an interesting puzzle to solve. Developers will have to concentrate on meeting the requirement and also focus on getting it done for multiple platforms. We would like to showcase a small html and control file that uses ionic framework. Ofcourse the base app development tool is Adobe Phonegap. Ionic framework provides us the flexibility to use Angular JS and HTML 5.

Here is a sample code for an UI and the controller.js file. The controller uses a dropdown that fetch values dynamically from a Webservice.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!doctype html>
  2. <html ng-app="ionicApp"><head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
  5.    <!-- ionic/angularjs CSS -->
  6.     <link href="css/ionic.css" rel="stylesheet">
  7.     <link href="css/ionic-custom.css" rel="stylesheet">
  8.     <!-- ionic/angularjs js bundle -->
  9.     <script type="text/javascript" src="js/ionic.bundle.js"></script>
  10. <script>
  11. angular.module('ionicApp', ['ionic'])
  12. .controller('MainCtrl', function($scope) { 
  13.     $scope.data = {
  14.     "loginpassword" : ""
  15.   };
  16.     $scope.devList = [
  17.     { text: "Keep me Logged in", checked: true }
  18.   ];
  19. });
  20. </script>
  21. </head>
  22. <body ng-controller="MainCtrl">
  23.     <ion-nav-view animation="slide-left-right"><ion-view hide-nav-bar="true" class="pane">
  24.     <ion-content class="signin-wrapper scroll-content ionic-scroll" overflow-scroll="true">
  25. <div class="scroll">
  26.         <div class="signin-page">
  27.             <div style="min-height:80px;"></div>
  28. <div class="signin-logo"> <img src="images/logo.png" alt="" class="logo">
  29.             </div>
  30. <form name="myForm" id ="myForm" novalidate ng-submit="submit()">
  31. <div>
  32. <a class="login" href="#">Login</a>
  33. </div>
  34. <div class="list list-inset user-input">
  35.                     <label class="item item-input">
  36. <img src="images/pwd.png" alt="" class="pwd">
  37.                         <input type="password" class="loginuser" placeholder="Password" name="loginpassword" id="loginpassword" ng-model="data.loginpassword" required ng-minlength="4" ng-maxlength="10"/>
  38.                     </label>
  39.                 </div> 
  40. <div class="item errors">
  41. <p ng-show="myForm.loginpassword.$error.required">Password is required</p>
  42. <p ng-show="myForm.loginpassword.$error.minlength">Password is too short</p>
  43. <p ng-show="myForm.loginpassword.$error.maxlength">Password is too long</p>
  44. </div> 
  45. <div class="row">
  46. <div class="col col-10">
  47. </div>
  48. <div align="center" class="col col-33">
  49. <a class="button button-block" href="home.html" ng-disabled="myForm.$invalid">Sign In</a>  
  50. </div>
  51. <div align="center" class="col col-50">
  52. <div style="min-height: 20px;"></div>
  53. <a class="forget" href="#">Forgot your password?</a>
  54. </div>
  55. <div class="col col-10">
  56. </div>
  57. </div>
  58. <div class="row">
  59. <div class="col col-10">
  60. </div>
  61. <div align="center" class="col col-20">
  62. <ion-checkbox ng-repeat="item in devList"
  63. ng-model="item.checked" 
  64. ng-checked="item.checked">
  65. </ion-checkbox>
  66.    </div>
  67. <div align="center" class="col col-50">
  68. <a class="check_btn" href="#">Keep me logged in</a>
  69. </div>
  70. <div class="col col-10">
  71. </div>
  72. </div>
  73. </div>
  74.             </form>
  75.         </div>
  76.        </ion-content>
  77. </ion-view>
  78. </ion-nav-view>
  79. </body></html>
  80.  
  81. Controller.JS 
  82.  
  83. angular.module('starter.controllers', [])
  84.  
  85. .controller('LoginCtrl', function($scope, $log, $ionicModal, $timeout, $state, $http, $rootScope, ROOT_URL,nativeNotificationFactory,$q,md5) {
  86.     $scope.loginData = {};
  87.     $scope.loginData.appversion = "5.0";
  88.     $scope.CompanyResult = [];
  89.     $scope.languages = [];
  90.     $scope.langshow = false;
  91.     $scope.empid = false;
  92.     $scope.deviceshow = false;
  93.     $scope.loginData.companyID = "";
  94.     $scope.loginData.emailpin="";
  95.     $scope.devicePlatform=device.platform;
  96.     $scope.signup=false;
  97.     $scope.dURL = 'https://api.w2ssolutions.com';
  98.  
  99.   window.plugins.imeiplugin.getImei(callback);
  100.  
  101.   function callback(imei){
  102.     $scope.loginData.imei = imei;
  103.     $scope.ImeiNoEN = md5.createHash(imei);
  104.   };
  105.   $scope.doLogin = function(isValid) {
  106.     if (!isValid) {	 
  107.  nativeNotificationFactory.showAlert("All fields are required");
  108.  	}else {
  109.  	var rData =  {
  110.   "Form_Code": "",
  111.   "Code": "MOB_COM_SEARCH",
  112.   "MobileInfo": 
  113.       {
  114.           "IMEINO": $scope.loginData.imei,
  115.           "UICulture": "en-CA",
  116.           "CompanyID": "MOBTRIAL",
  117.           "Token": "test",
  118.           "LanguageCode": "ENG"
  119.       }
  120.   ,
  121.   "Search_Text": $scope.loginData.company
  122. };
  123.  	$http.post(ROOT_URL + "login.asmx",
  124.  	rData,{headers: {
  125.         "Content-Type": "application/json"
  126.     }}).then(function(response) {
  127.   var data = response.data;
  128.       },handleNetworkError);	 
  129.  }  
  130.     }
  131.  
  132.     $scope.select = function(value){
  133.     }
  134.  
  135.     $scope.signupStatus = function(){
  136.       var rData =  {
  137.          "MobileInfo": 
  138.               {
  139.                 "IMEINO": $scope.loginData.imei,
  140.                 "UICulture": "en-CA",
  141.                 "CompanyID": $scope.loginData.companyID,
  142.                 "Token": "test",
  143.                 "LanguageCode": 'ENG'
  144.               },
  145.           "ImeiNo":$scope.loginData.imei,
  146.           "EmpId":$scope.loginData.empid  
  147.  
  148.         };
  149.       $http.post($scope.dURL + "Signup.asmx",
  150.           rData,{headers: {
  151.               "Content-Type": "application/json"
  152.     }}).success(function(response) {
  153.  
  154.         var data = response;
  155.         var jData = angular.fromJson(data.d);
  156.         var device = jData.Data[0];
  157.  
  158.  
  159.         if(device == true){
  160.            $state.go("signin");
  161.  
  162.         }else{
  163.           getDeviceDetails();
  164.         }
  165.  
  166.  
  167.      });
  168.  
  169.    }
  170.  
  171.  
  172.  
  173.   function getRequestSignup(){
  174.     var rData =  {
  175.          "MobileInfo": 
  176.               {
  177.                 "IMEINO": $scope.loginData.imei,
  178.                 "UICulture": "en-CA",
  179.                 "CompanyID": $scope.loginData.companyID,
  180.                 "Token": "test",
  181.                 "LanguageCode": 'ENG',
  182.                 "LoginSource":"Mobile"
  183.               },
  184.           "EmpID":$scope.loginData.empid,    
  185.           "ImeiNo":$scope.loginData.imei,
  186.           "ImeiNoEN":$scope.ImeiNoEN,
  187.           "OSName":$scope.devicePlatform
  188.       };
  189.  
  190.     $http.post($scope.dURL + "Requestsignup.asmx",
  191.           rData,{headers: {
  192.               "Content-Type": "application/json"
  193.     }}).success(function(response) {
  194.  
  195.         var data = response;
  196.         var jData = angular.fromJson(data.d);
  197.         var device = jData.Data[0];
  198.         nativeNotificationFactory.showAlert(device);
  199.         $scope.signup = true;
  200.  
  201.      }).error(function(data, status, headers, config) {
  202.           nativeNotificationFactory.showAlert("error");
  203.   });
  204.  
  205.    }
  206.  
  207.  
  208.   $scope.callbacks = [];
  209.   $scope.autocomplete_options = {
  210.     suggest:function(request,response){
  211.      var semaphore = false;
  212.      var result = checktest();
  213.      var results = [];
  214.      return $q.all([result]).then(function(responses){
  215.  
  216.          var data = responses[0];
  217.          var jData = angular.fromJson(data.d);
  218.          var companies = jData.Data[0];
  219.         angular.forEach(companies, function(value, key) {
  220.              var label = value.Text_Field;
  221.              var value = value.Value_Field;
  222.              results.push({ label: label, value: value });
  223.          });
  224.           return results;
  225.        });
  226.     },
  227.     on_select:chooseLanguage
  228.   };
  229.  
  230.     handleNetworkError = function(response){
  231. nativeNotificationFactory.showAlert(response.status);
  232.   };
  233. })

URL: http://www.w2ssolutions.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.