使用ionic从API获取下拉值

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ionic从API获取下拉值相关的知识，希望对你有一定的参考价值。

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.
  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. })

以上是关于使用ionic从API获取下拉值的主要内容，如果未能解决你的问题，请参考以下文章

从 Ionic Storage 设置/获取对象和值

从每个 *ngFor ionic 4, ionic 5, ionic 6 获取值

在 IONIC 中使用谷歌 API 比较多个地址时如何获取关闭地址

ionic5 ion-refresher下拉更新

从Snipplr获取一个代码片段

AutoCompleteTextView - 我正在使用autocompletetextview，它显示来自API的值（返回名称和代码）