Question

我从Angular JS开始，我在论坛上找不到答案。

我使用Angular的Onsen UI，我尝试用Angular发出一个AJAX请求，只是提交它，但它不起作用

我的代码：

ons.bootstrap()
.controller('contactController', function($scope) {
  $scope.submit = function () {
 alert('test');
 }
  });

我的形式：

<form ng-controller="contactController" ng-submit="submit()" >

    <p>
      <ons-input id="motif_contact"  placeholder="Motif du contact"
                 float ng-model="contact.motif">
      </ons-input>
    </p>
    <p>
      <ons-input id="email_contact"  placeholder="Adresse e-mail"
                 float ng-model="contact.email">
      </ons-input>
    </p>    <p>
     <textarea class="textarea--transparent" 
               style="border-bottom:1px solid grey;" 
               rows="3" placeholder="Votre message">
     </textarea>
    </p>
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button   >Envoyer</ons-button></center>
    </p>



</form>

只要我是最后一个问题，它如何恢复表单的数据以通过ajax发送它？

由于

Answer 1

这是一个触发提交功能的例子，它在browser.log浏览器控制台中的模型联系人，检查模型是否正确。你需要打电话 $http表示对服务器或api端点的ajax请求。

我重新为那些人提供服务，并向控制器注入并进行简单的呼叫并发送它的论据。

<强>控制器

ons.bootstrap().controller('contactController', function($scope) {
    var vm = this;
      vm.contact = {
       motif:'',
       email:'',
       message:''
      };
      vm.submit = function () {
      console.log(vm.contact);
    }
  });

<强> HTML

<form ng-controller="contactController as vm" ng-submit="vm.submit()" >
    <p>
      <ons-input id="motif_contact"  placeholder="Motif du contact"
             float ng-model="vm.contact.motif">
      </ons-input>
    </p>
    <p>
      <ons-input id="email_contact"  placeholder="Adresse e-mail"
             float ng-model="vm.contact.email">
      </ons-input>
    </p>    
    <p>
       <textarea class="textarea--transparent" 
           style="border-bottom:1px solid grey;" 
           rows="3" placeholder="Votre message" ng-model="vm.contact.message">
     </textarea>
    </p>
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button>Envoyer</ons-button></center>
    </p>
</form>

AngularJS提交调用不起作用

1 个答案: