Posted By

w2ssolutions on 06/19/15

Tagged

Versions (?)

Last Edited at 06/19/15 07:13pm

Statistics

Viewed 906 times

Favorited by 0 user(s)

Related snippets

fetch drop down values from API using ionic

/ Published in: iPhone

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.

Highlighted TextExpand

<!doctype html>
<html ng-app="ionicApp"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
   
    <link href="css/ionic.css" rel="stylesheet">
    <link href="css/ionic-custom.css" rel="stylesheet">
    
    <script type="text/javascript" src="js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) { 
    $scope.data = {
    "loginpassword" : ""
  };
    $scope.devList = [
    { text: "Keep me Logged in", checked: true }
  ];
});
</script>
</head>
<body ng-controller="MainCtrl">
    <ion-nav-view animation="slide-left-right"><ion-view hide-nav-bar="true" class="pane">
    <ion-content class="signin-wrapper scroll-content ionic-scroll" overflow-scroll="true">
<div class="scroll">
        <div class="signin-page">
            <div style="min-height:80px;"></div>
<div class="signin-logo"> <img src="images/logo.png" alt="" class="logo">
            </div>
<form name="myForm" id ="myForm" novalidate ng-submit="submit()">
<div>
<a class="login" href="#">Login</a>
</div>
<div class="list list-inset user-input">
                    <label class="item item-input">
<img src="images/pwd.png" alt="" class="pwd">
                        <input type="password" class="loginuser" placeholder="Password" name="loginpassword" id="loginpassword" ng-model="data.loginpassword" required ng-minlength="4" ng-maxlength="10"/>
                    </label>
                </div> 
<div class="item errors">
<p ng-show="myForm.loginpassword.$error.required">Password is required</p>
<p ng-show="myForm.loginpassword.$error.minlength">Password is too short</p>
<p ng-show="myForm.loginpassword.$error.maxlength">Password is too long</p>
</div> 
<div class="row">
<div class="col col-10">
</div>
<div align="center" class="col col-33">
<a class="button button-block" href="home.html" ng-disabled="myForm.$invalid">Sign In</a>  
</div>
<div align="center" class="col col-50">
<div style="min-height: 20px;"></div>
<a class="forget" href="#">Forgot your password?</a>
</div>
<div class="col col-10">
</div>
</div>
<div class="row">
<div class="col col-10">
</div>
<div align="center" class="col col-20">
<ion-checkbox ng-repeat="item in devList"
ng-model="item.checked" 
ng-checked="item.checked">
</ion-checkbox>
   </div>
<div align="center" class="col col-50">
<a class="check_btn" href="#">Keep me logged in</a>
</div>
<div class="col col-10">
</div>
</div>
</div>
            </form>
        </div>
       </ion-content>
</ion-view>
</ion-nav-view>
</body></html>

Controller.JS

angular.module('starter.controllers', [])

.controller('LoginCtrl', function($scope, $log, $ionicModal, $timeout, $state, $http, $rootScope, ROOT_URL,nativeNotificationFactory,$q,md5) {
    $scope.loginData = {};
    $scope.loginData.appversion = "5.0";
    $scope.CompanyResult = [];
    $scope.languages = [];
    $scope.langshow = false;
    $scope.empid = false;
    $scope.deviceshow = false;
    $scope.loginData.companyID = "";
    $scope.loginData.emailpin="";
    $scope.devicePlatform=device.platform;
    $scope.signup=false;
    $scope.dURL = 'https://api.w2ssolutions.com';

window.plugins.imeiplugin.getImei(callback);

$scope.select = function(value){
    }

$scope.signupStatus = function(){
      var rData =  {
         "MobileInfo": 
              {
                "IMEINO": $scope.loginData.imei,
                "UICulture": "en-CA",
                "CompanyID": $scope.loginData.companyID,
                "Token": "test",
                "LanguageCode": 'ENG'
              },
          "ImeiNo":$scope.loginData.imei,
          "EmpId":$scope.loginData.empid

};
      $http.post($scope.dURL + "Signup.asmx",
          rData,{headers: {
              "Content-Type": "application/json"
    }}).success(function(response) {

var data = response;
        var jData = angular.fromJson(data.d);
        var device = jData.Data[0];
        
       
        if(device == true){
           $state.go("signin");
           
        }else{
          getDeviceDetails();
        }
        
        
     });

}

function getRequestSignup(){
    var rData =  {
         "MobileInfo": 
              {
                "IMEINO": $scope.loginData.imei,
                "UICulture": "en-CA",
                "CompanyID": $scope.loginData.companyID,
                "Token": "test",
                "LanguageCode": 'ENG',
                "LoginSource":"Mobile"
              },
          "EmpID":$scope.loginData.empid,    
          "ImeiNo":$scope.loginData.imei,
          "ImeiNoEN":$scope.ImeiNoEN,
          "OSName":$scope.devicePlatform
      };
      
    $http.post($scope.dURL + "Requestsignup.asmx",
          rData,{headers: {
              "Content-Type": "application/json"
    }}).success(function(response) {

var data = response;
        var jData = angular.fromJson(data.d);
        var device = jData.Data[0];
        nativeNotificationFactory.showAlert(device);
        $scope.signup = true;
       
     }).error(function(data, status, headers, config) {
          nativeNotificationFactory.showAlert("error");
  });

}

$scope.callbacks = [];
  $scope.autocomplete_options = {
    suggest:function(request,response){
     var semaphore = false;
     var result = checktest();
     var results = [];
     return $q.all([result]).then(function(responses){
         
         var data = responses[0];
         var jData = angular.fromJson(data.d);
         var companies = jData.Data[0];
        angular.forEach(companies, function(value, key) {
             var label = value.Text_Field;
             var value = value.Value_Field;
             results.push({ label: label, value: value });
         });
          return results;
       });
    },
    on_select:chooseLanguage
  };
  
    handleNetworkError = function(response){
nativeNotificationFactory.showAlert(response.status);
  };
})

URL: http://www.w2ssolutions.com

Report this snippet Tweet