使用angularjs清除输入字段

时间:2017-01-24 11:17:44

标签: javascript angularjs coffeescript

让我重新解释一下我的问题,我有一个问题,删除上传的文件,所以我按照建议对我的代码进行了一些修改,但它仍然不起作用,还有一个覆盖我上传的问题文件,所以每次我上传的东西都会覆盖以前的文件,我希望能够上传多个并删除它们,谢谢

<form class="htmlForm">
  <label for="id_payment_proof">{% trans "Payment proof:" %}</label>
  <div class="full-size">
    <div class="input-control full-size file" data-role="input">
      <input id="id_payment_proof" type="file" file-model="payment_proof"/>
      <button class="button"><span class="mif-folder"></span></button>
    </div>
  </div>
  <div ng-if="client_invoice.payment_proof_filename">
    <a ng-href="{{ client_invoice.payment_proof }}"
    ng-bind="client_invoice.payment_proof_filename"
    target="_blank"></a>
    <button class="button" ng_click="clearInvoice()">
      <span class="mif-bin"></span>
    </button>
  </div>
  {% endverbatim %}
</form>

controler:

editInvoiceHandler = (event, row) ->
$scope.payment_proof = undefined
$scope.htmlFormEl.reset()
$scope.row = row
$scope.client_invoice = row.data()
hasChanges = false
$scope.editMode = true
$scope.$digest()

$scope.clearInvoice() = () ->
$scope.payment_proof = 0

3 个答案:

答案 0 :(得分:1)

我没有测试下面的代码,但认为它可能与您需要的类似:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="menu-fixed">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <a href="#link4">Link 4</a>
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<div id="link1">
  <h1>Link 1</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>
<div id="link2">
  <h1>Link 2</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>
<div id="link3">
  <h1>Link 3</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>
<div id="link4">
  <h1>Link 4</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>

想法是操纵一个数组(在你的情况下为$scope.payment_proof = []; // presume you don't want any pre-loaded entries $scope.add(new_entry) = payment_proof.push(new_entry); $scope.delete(index) = payment_proof.splice(index,1); $scope.clearInvoice = { $scope.payment_proof = []; } //Then submit the payment_proof to the back end )并将其提交到后端。

答案 1 :(得分:0)

在您的控制器中:

$scope.deleteUploadedFile = function () {
  $scope.payment_proof = null 
}

答案 2 :(得分:0)

试试这个

<button class="button" ng-click="payment_proof = ''"> Delete</button>