angularjs-ionic il-ilce-mahalle

  Çogu telefon uygulamasında ihtiyac duyulabilecek adres bilgileri için il ilce mahalle veritabanını oluşturmanıza gerek yok.Bunun için bir arkadaşın oluşturduğu web servisleri kullanarak select listler oluşturalım.


controller.js içerisine AdressCtrl oluşturalım:

.controller('AdressCtrl', function($scope,$stateParams,$http){
}

ilk sayfa açıldığında illerin gelmesini istiyorum. Bu yuzden fonksiyona almadan illeri getirelim:

 var CityUrl="http://services.atiksoftware.com/turkiye/";
 
   $scope.$root.select_il="";
   $http({ url: CityUrl,method: "GET"}).success(function(data){
         $scope.il=data;
      })

adress.html sayfasına:

  <ion-item>
   <select ng-model="$root.select_il" ng-change="getilce()">
   <option ng-repeat="city in il " title="{{city.il_ad}}"  value="{{city.id}}">{{city.il_ad}}</option>
 </select>
  </ion-item>

il seçildiğinde illerin gelmesi için ng-change olayıyla oluşturacağımız getilce() fonksiyonuna gönderme yaptık. seçtiğimiz ilin id sinine selectin ng-modelinde tutuyoruz.

iller seçildiğinde ilçeler listelenmesi için controllara yazmaya devam edelim:

 $scope.$root.select_ilce="";
$scope.isselectil = function() {
      if ($scope.$root.select_il != "")
        return true;
      else
        return false;

    };

   $scope.getilce=function(){
    $scope.$root.select_ilce="";
    var IlceUrl="http://services.atiksoftware.com/turkiye/"+$scope.$root.select_il+"/";
    $http({ url: IlceUrl,method: "GET"}).success(function(data){
         $scope.$root.ilce=data;
      })
   }


www/template/adress.html


 <div ng-show="isselectil()">
 <ion-item>
<select ng-model="$root.select_ilce" ng-change="getdistrict()">
   <option ng-repeat="town in $root.ilce "  title="{{town.ilce_ad}}"  value= "{{town.id}}" >{{town.ilce_ad}} </option>
</select>
 </ion-item>
</div>

   isselectil fonksiyonunda eğer seçili il varsa ng-show ile göster, yoksa sayfada ilçeye dair bişey gösterme

 

 Seçilen ilçeye görede mahalleyi getirelim:

controller.js

 $scope.isselectilce = function() {
      if ($scope.$root.select_ilce != "")
        return true;
      else
        return false;

    };

 $scope.getdistrict=function(){
      $scope.$root.select_district="";
    
      var DistrictUrl="http://services.atiksoftware.com/turkiye/"+$scope.$root.select_il+"/"+ $scope.$root.select_ilce+"/";
      $http({ url: DistrictUrl,method: "GET"}).success(function(data){
           $scope.district=data;
        })
     }

www/template/adress.html

  <div ng-show="isselectilce()">
 <ion-item>
<select ng-model="$root.select_district" ">
   <option ng-repeat="dis in district " title="{{dis.semt_ad}}"  value="{{dis.id}}">{{dis.semt_ad}}</option>
</select>
 </ion-item>
</div>