システム開発

angularJSでajaxZip3を使う際に気を付けるべき注意点

  • このエントリーをはてなブックマークに追加
  • LINEで送る
zip

ajaxzip3は、郵便番号を入力するだけで自動で住所を表示してくれる機能です。google codeが終了し、githubでの運用に変わったので、古いコードは修正が必要です。

angularJS + ajaxZip3の注意事項

Angular JSを使っていても、ajaxZip3は動作しますが、1点だけ問題があります。
郵便番号を入力して、住所が自動で代入されても、angular js側で住所の値がセットされたことを検知してくれないことです。
住所の後ろに番地などを入力すれば、問題なく反映されてきますが、何らかの変更を加えない限り$scope上の住所は空欄のままということになります。

<input type="text" ng-model="zip" ng-maxlength="8" name="zip11" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" id="trg" name="addr11" ng-model="addr"  ng-maxlength="32">

郵便番号のフォーム(zip11)が変わると、onKeyUpのイベントが発生します。そして郵便番号に対応する住所がaddr11に代入されます。

何故バインドされないのか?

AngularJSは双方向データバインドという仕組みで動作していますが、外部から書き換えられた値(例えばajaxZip3から書き換えられた値等)はデータバインディングされず、フォーム上の値とscopeの値にズレが生じてしまいます。フォームの画面上は住所が入っているのに、バインドされているscopeは変わる前(空欄)のままということになってしまいます。

外部からのイベントを検知する仕組み

$applyを使うことで強制的にバインドさせることができます。


    var update = function() {
      var target = document.getElementById("trg");
      $log.info(target.value);
      $scope.addr = target.value;
    };
    update();
    setInterval(function() {
      $scope.$apply(update);
    }, 1000);

この例では、1秒ごとにテキストボックス(addr11)の値を取得し、$scope.addrに代入しています。
他に良いやり方があるのかわかりませんが、とりあえずこれで動きました。
しかし、フレームワークを使うのが当たり前のJavaScriptで、document.getElementByIdなんて久しぶりに使いました。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

AngularJS+BootStrapでサロンカルテを作りました

【作品例 サロンカルテ】
サロンカルテはAngular JSとBootStrap3を使って開発されたWebクラウドシステムの1つです。
強力なデータバインド機能のおかげで、お客様のカルテデータをサーバから取得、ng-repeatを使うだけで簡単に画面へ出力できたり、BootStrapで手軽におしゃれな画面が実装できます

サロンカルテのホームページ