2015-04-01 52 views
1

我是AngularJS的新手,我似乎可以找到解決我的問題的方法。我在我的網站上有一個文件上傳字段和一個提交按鈕。當用戶第一次點擊該頁面時,該頁面有一個下拉列表和一個禁用的提交按鈕。提交按鈕僅在從下拉列表中進行選擇後才能啓用。這很好,但我現在被要求添加一個文件上傳選項到我已經完成的列表中,並且我的文件上傳<input type="file">字段在選中時顯示。AngularJs禁用提交按鈕,直到選擇文件上傳路徑

我遇到的問題是,當用戶選擇上傳選項時,它啓用了我的按鈕,而我只希望在選擇文件路徑後啓用提交按鈕。

此時按鈕的啓用/禁用在我的視圖中完成,如下所示。

  <div class="form-group"> 
       <div class="col-sm-8"> 
        <select name="selectedbankaccountname" ng-options="choice for choice in bankaccountnames" ng-model="selectedbankaccountname" class="form-control" style="width:100% !important" focus-on="setfocus" required> 
         <option></option> 
        </select> 
       </div> 
       <!-- TODO - BUTTON NEEDS TO BE DISABLED IF BANK UPLOAD SELECTED & FILE NOT SELECTED --> 
       <button type="submit" class="btn btn-success" ng-disabled="startautoreconciliation.selectedbankaccountname.$invalid || disablebutton" ng-click="startrec()" title="Click to start the auto reconciliation procedure.">Start Auto Rec</button> 
      </div> 
      <div class="form-group" ng-if="bankreconciliation.reconciliationtype == 'Bank file upload'"> 
       <div class="col-sm-12"> 
        <p>Please ensure that you have copied the selected file to the designated folder prior to uploading the bank file.</p> 
        <input type="file" style="width: 100%; height: 35px; border: none !important; cursor: pointer" onchange="angular.element(this).scope().file_changed(this)" ng-model="bankfilepath" /> 
       </div> 
      </div> 

任何人都可以闡明我如何得到這個工作。

回答

2

在你的提交按鈕,0​​屬性

ng-disabled="!bankfilepath || startautoreconciliation.selectedbankaccountname.$invalid || disablebutton" 

支票bankfilepath爲好。

所以只有在選擇文件時才啓用該按鈕。最初bankfilepath將是未定義的,一旦用戶選擇了一個文件,它將具有文件路徑。

+0

感謝這對我的新上傳選項非常有用,但現在已禁用了所有其他不需要上載路徑選項的按鈕。有沒有辦法做到這一點,或者我需要創建/創建2提交按鈕,並顯示相關的一個取決於從下拉列表中的選擇 – murday1983 2015-04-01 08:28:59

+0

管理排序它:ng-disabled =「bankreconciliation.reconciliationtype =='銀行文件上傳'&&!bankfilepath || startautoreconciliation.selectedbankaccountname。$ invalid || disablebutton「 – murday1983 2015-04-01 08:31:00