QA@IT

AngularJSでajaxzip3を使って住所を表示させる

5228 PV

ionic を使って簡単なformを作っています。
ajaxZip3 を使ってみたのですが、なるほど簡単にonKeyUpで住所を表示させてくれました。ここまでは良かったのですが、
ng-model での バインディングがよく理解できておらず、確認ボタンでmodal()を使って次の確認画面を表示させたいのですが、住所が表示されません。当然データベースにも住所が登録できない状態です。getElementbyNameで pref01の値を引張てこようとしましたが、この場合 {"0":{222}}のような文字しか返ってきません。
どうすれば表示される住所の文字列を取り出すことができるのでしょう?
ご教授いただけると幸いです。

回答

さすがにコードの部分でも無いことには現状がわかりませんので、そのあたりは考慮しないこととします。
値が取得できないのは ionicと関係なさそうに思えるので、AngularとajaxZip3の部分のみです。

ajaxZip3で値設定後getElementsbyNameで値を取得することができます。
ただし、ElementではなくElementsです。
配列でとれるので添え字が必要になります。
pref01が実際にはなにかわかりませんがテキストボックスなら

document.getElementsByName('pref01')[0].value

で取得できるでしょう。

AngularJSでng-modelでバインドしたコントロールであっても、
javascriptから直接設定した場合そのままではモデルに反映されません。

jqLiteのtriggerHandlerやjqueryのtriggerを使って入力イベントを発生させることで、
modelに反映することができます。

AjaxZip3のソースを見るに onSuccessに関数を設定しておけば取得時に呼び出してくれるようなので
そのタイミングでモデルに値が設定されるようにすればいいでしょう。
(個人的な好みでは、callback渡せるかpromise使えるともっと便利になりそうですね、このライブラリ)

簡単な例だけ挙げておきます。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
  </head>
<body ng-app="app" ng-controller="ZipCtrl">

  <!-- ajaxzipのgithubページに載っていた例にモデルのバインドを足しただけ -->
  <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
  <input type="text" name="pref01" size="20" ng-model="pref">
  <input type="text" name="addr01" size="60">

  <!-- モデルが更新されることを確認するためのpre -->
  <pre ng-bind="pref"></pre>

  <script type="text/javascript">
    var app=angular.module('app', []);

    app.controller('ZipCtrl', function($scope){

      // onSucess時の処理を設定しておく
      AjaxZip3.onSuccess = function(){
        angular.element(
          document.getElementsByName('pref01')[0]
        ).triggerHandler('input');
        angular.element(
          document.getElementsByName('addr01')[0]
        ).triggerHandler('input');
      };
    });    
  </script>
</body>
</html>
編集 履歴 (3)
  • お返事が遅くなってしまし大変失礼いたしました。

    コードの記入もない不躾な質問に親切丁寧に回答していただき誠に恐縮です。
    なんとなく見えてきましたので早速試してみます。

    モノの情報によるとAngularjsとJqueryは一緒に使わない方が良いとありますがあまり気にしなくても良さそうで安心しました。
    この度はご回答ありがとうございました。
    -
  • 大変ありがとうございます。
    見事に解決いたしました。
    もっと勉強せねばと痛感いたしました。
    本当にありがとうございました。
    -
  • AngularJS 1は簡易版jQueryともいうべきjqLiteを独自に持っています。
    ある程度はそれで代用できますが、どうしてもjQueryが必要な場合はAngularよりも前にjQueryのscript srcを宣言すれば使えるようになります(そのようにAngular 1の方で実装されています)。
    -
  • ただし、いくつかのAngularのプロパティがjQueryによって使えなくなってしまうため、利用する場合は注意が必要です。
    前述のAngularよりもjQueryを先に…というのは、何が起こるかわかっている場合の救済措置と考えておいた方がいいでしょう。
    -
  • なるほど、jQueryを先にということですね。できるだけAngularJsだけで済ませたいのですが、どうしても慣れているjQueryに頼ってしまいたくなります・・・
    重ね重ねご教示いただきありがとうございます。
    -
  • jqLiteは初耳です。調べてみます。見落とすところでした(・・;)
    ありがとうございます。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。