2017-07-31 8 views
-2

保存ユーザー(複数可)メールアドレスと名前、私のUIは、2つのテキストボックス、ユーザー名に対するユーザーの電子メールアドレス用とその他で始まり

<input type="text" data-ng-model="contact.email_address" placeholder="Email Address" /><br /> 
    <input type="text" data-ng-model="contact.name" placeholder="Name" /> 

私は残しています私はjQueryからAngularJSに移行しているので、これを完成させるためにさまざまな方法を試してきたので、できる限り基本的なものです。これをどうやって行うのか混乱しています。 複数のユーザーがいる必要がある場合は、このボタンをクリックし、別のテキストボックスが表示されるボタンが必要です。私はこれを行うことができますが、私はそれを次の部分とどのように組み合わせるか分かりません。これは、X個のユーザーをアレイに追加するために行うものです。今、私が上で立ち往生しています部分は、電子メールアドレス/名前の配列を挿入している

angular.module('controllerAsRecipient', []) 
     .controller('SettingsController', function ($scope) { 
      $scope.contacts = []; 
      $scope.addContact = function() { 
       $scope.contacts.push({ email_address: '', name: '' }) 
      } 
     }); 

AJAXを作成する方法である:

<body data-ng-app="controllerAsRecipient"> 
    <div class="form-group" id="ctrl-as-exmpl" data-ng- 
     controller="SettingsController"> 
    <ul> 
     <li data-ng-repeat="contact in contacts track by $index"> 
      <input type="text" data-ng-model="contact.email_address" placeholder="Email Address" /><br /> 
      <input type="text" data-ng-model="contact.name" placeholder="Name" /> 
     </li> 
     <li> 
      <button data-ng-click="addContact()">Add Recipients</button> 
     </li> 
    </ul> 
    </div> 

AngularJSのようになります。私は、次のようなHTMLを書きましたこのデータはAPIに渡されます。パラメータは、電子メール/名前の値の配列になりますが、多くの場合は1か50かどうかがわかります。$ .ajaxを使用してjQueryで簡単に行うことができますが、AngularJSで行う方法はわかりませんが、私はまだそれを行う必要があります。上記はうまく動作しますが、それを簡単に行う方法があれば、それを完全に別のものに裂くことに全く反対しません。私が言ったように、私は簡単にjQueryでこれを行うことができますが、AngularJSで(まだ)それを行う方法はわかりません。もし誰かが私を助けることができたら、私は感謝します。より具体的にする必要がある場合は、私に知らせてください。私は新しい質問を書くつもりです。事前にどうもありがとうございました。

+0

$ http.post(...)は、あなたがするだろう角度呼び出しです。その詳細は、主にバックエンドの期待に依存しています。 –

+0

私は構文を認識していますが、これまでに行っていないため、実際の投稿を行う方法や、配列を渡す方法についてアドバイスを知っている人がいるかどうかはわかりませんでした。 TIA。 – wrikgee

+0

あなたがこれまでに行ったこと、受け取ったエラー、APIが期待していることなどを投稿してください。あなたの質問は有用な情報を提供するものではありません。 –

答えて

0

お使いのコントローラに注入し、$httpを使用してみてください、と約束の呼び出しを行う

angular.module('controllerAsRecipient', []) 
    .controller('SettingsController', function ($scope, $http) { 
     $scope.contacts = []; 
     $scope.addContact = function() { 
      $scope.contacts.push({ email_address: '', name: '' }) 
     }; 

     $scope.sendInfo = function(){ 
      $http({ 
       method: 'POST' 
       url: 'your url api', 
       data: contacts 
      }).then(function(response){ 
       //if response success 
      }, function(error){ 
       //if error 
      }); 
     }; 
    }); 
+0

私はちょうど$ .ajaxをやっているので、$ httpの面をどうやってやるのか分からなかったので、私は今これをテストしています。もしそうでなければ、あなたは私の質問に答えて、それを理解しようとしています。私はあなたに情報を提供し、答えが私が必要なものかどうかを知ることは明らかです。私はそれをやり遂げるかどうかは確かではない、おそらく、おそらくそうでないかもしれない。もう一度ありがとうございました。皆様のお越しをお待ちしております。 – wrikgee

+0

角度の内側でjqueryを使用すると、いくつかのバグが発生することを覚えておいてください。各コントローラーで$ http要求を行い、サービス中であれば再利用可能にします。 –

関連する問題