Question

在此编码器中：

当用户点击“重置”时，我正在尝试重置表单元素。因此，应隐藏div元素f1,f2,f3并清除searchText框。但是重置按钮没有触发。我认为原因是不允许多个提交按钮作为AngularJS表单的一部分？

如何在点击“重置”时设置表单元素？

src：

<html>
  <head>
    <title>AngularJS test</title>
  </head>
  <body ng-app ng-controller="TestCtrl">

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

       <div style="display:none" id="notFound">Not Found</div>

       <div style="display:none" id="f1"></div>
       <div style="display:none" id="f2"></div>
       <div style="display:none" id="f3"></div>

          <input id="searchText" type=text/>

    <input type="submit" ng-click="submit" value="Submit">

    <input type="submit" ng-click="reset" value="Reset">

            </form>

     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

</body>
</html>

function TestCtrl($scope , $http) {

  $scope.reset = function() {

      $("#f1").css('display' , 'none');
      $("#f2").css('display' , 'none');
      $("#f3").css('display' , 'none');

        $("#searchText").text('');
  }

  $scope.submit = function() {

    $http.get('').
    success(function(data, status, headers, config) {

     // this callback will be called asynchronously
    // when the response is available

      $("#f1").text('test');
      $("#f1").css('display' , 'block');

      $("#f2").text('test');
      $("#f2").css('display' , 'block');

      $("#f3").text('test');
      $("#f3").css('display' , 'block');

  }).
  error(function(data, status, headers, config) {

       $("#notFound").css('display' , 'block');
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });



  }




}

Answer 1

您正在使用按钮上的ng-click和表单上的ng-submit。 Angular docs建议不要出于这个原因 - 它们会发生冲突，因为它们都会被调用。

请参阅此处顶部的警告：https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngSubmit

只要您点击“提交”类型的输入，就会运行Ng-submit。重置按钮应为“按钮”类型，以避免出现这些问题。

同样ng-click="reset"应为ng-click="reset()"

工作小提琴：http://codepen.io/anon/pen/NqNQQq

编辑：作为旁注，@ isherwood的评论是正确的 - 你使用的是角度错误，因为你不应该在控制器中使用jquery来搞乱HTML。我将查看指令，并使用angular.element（仅在严格必要时，而不是这种情况）更新示例以不使用jquery。

重置AngularJS表单元素

1 个答案: