在模态中重置引导表单答案

【问题标题】：Reset bootstrap form inside modal在模态中重置引导表单
【发布时间】：2015-11-07 22:49:07
【问题描述】：

我想简单地清除引导模式中存在的表单上的字段。我通过合并尝试了this solution

<button type="reset" class="btn btn-danger">Reset</button>

但它似乎没有做任何事情。这是我尝试过的一个小插曲：

Plunkr

【问题讨论】：

标签： angularjs forms twitter-bootstrap-3 modal-dialog

【解决方案1】：

嘿，你可以像使用 angular js 那样做。

Code on Plunker

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<div class="container" ng-app="app">
  <h2>Modal Form Reset Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" ng-controller="demoController">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Form</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" name="personForm" novalidate="">
          <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-5">
              <input class="form-control" type="text" placeholder="Name" ng-model="person.name" />
            </div>
          </div>
        </form>
        </div>
        <div class="modal-footer">
          <button type="reset" ng-click="reset()" class="btn btn-danger">Reset</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
<script>
  var app = angular.module("app",[]);

app.controller("demoController",function($scope){
  $scope.person = {};

  $scope.reset = function(){
    $scope.person = {};
  };
});
</script>
</body>
</html>

【讨论】：

就是这样，很简单，我喜欢。它也很有帮助，因为我需要在 reset() 函数中设置其他东西，所以无论如何我都可能需要该函数。