nantcom / thaiprovinces

Angular Module which helps create a form which lookup Thailand's Province, District and Subdistrct from client-side.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

thaiprovinces

Angular Module which helps create a form which lookup Thailand's Province, District and Subdistrct purely from client side.

Related Blog Post (in Thai): http://coresharp.net/blog/provincelookup

Creative Commons License
ThaiProvinces by Jirawat Padungkijjanont is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at https://github.com/nantcom/thaiprovinces.

#Sample

Sample Usage with https://github.com/angular-ui/ui-select :

  <ui-select
             ng-model="object.Address_State"
             theme="bootstrap"
             on-select="ctrl.thaiprovinces.setProvince($item.name)"
             reset-search-input="true">
      <ui-select-match placeholder="ระบุจังหวัด...">{{$select.selected.name}}</ui-select-match>
      <ui-select-choices repeat="item.name as item in thaiprovinces.all | filter: { name: $select.search }">
          <span>{{item.name}}</span>
      </ui-select-choices>
  </ui-select>
  
  <ui-select ng-model="object.Address_District"
             theme="bootstrap"
             on-select="ctrl.thaiprovinces.setDistrict($item.name)"
             reset-search-input="true">
      <ui-select-match placeholder="ระบุอำเภอ (เขต)...">{{$select.selected.name}}</ui-select-match>
      <ui-select-choices repeat="item.name as item in thaiprovinces.districtList | filter: { name: $select.search }">
          <span>{{item.name}}</span>
      </ui-select-choices>
  </ui-select>
  
  <ui-select ng-model="object.Address_Subdistrict"
             theme="bootstrap"
             reset-search-input="true">
      <ui-select-match placeholder="ระบุตำบล (แขวง)...">{{$select.selected.name}}</ui-select-match>
      <ui-select-choices repeat="item.name as item in thaiprovinces.subDistrictList | filter: {name : $select.search}">
          <span>{{item.name}}</span>
      </ui-select-choices>
  </ui-select>                

*Module Javascript Code:

  (function () {
  
      var module = angular.module('myMod', ['ui.bootstrap', 'ui.select', 'nantcom-thaiprovinces']);
  
      module.controller("myCtrl", function ($scope, $rootScope, thaiprovinces) {
  
          $scope.thaiprovinces = thaiprovinces; // for binding
          this.thaiprovinces = thaiprovinces; // for setting cascade list of district/subdistrict
  })();

About

Angular Module which helps create a form which lookup Thailand's Province, District and Subdistrct from client-side.