$髒當輸入類型爲「文件」

很新的AngularJS無法按預期工作。問題是我有兩個字段的形式 - 名稱和個人資料照片，如下面的代碼所示。我正在使用ng-upload（https://github.com/twilson63/ngUpload）。我希望「保存」按鈕僅在任何一個字段很髒並且當前沒有發生上載時才起作用，以便用戶單擊「保存」按鈕時不會觸發多個發佈請求。但是看起來，$ dirty與'name'字段無關，但與'profile pic'字段無關。我只是想念什麼？如何爲AngularJS的初學者儘可能簡單地做到這一點。任何幫助，將不勝感激。

   //Code 
      <form id='picUpload' name='picUpload' ng-upload-before-submit="validate()" method='post' data-ng-upload-loading="submittingForm()" action={{getUrl()}} data-ng-upload='responseCallback(content)' enctype="multipart/form-data"> 
      <input type="text" name="name" data-ng-model="user.name" maxlength="15" id="user_screen_name" required> 
      <input type="file" name="profilePic" data-ng-model="user.profilePic" accept="image/*"> 
      <div class="form-actions"> 
     <button type="submit" class="btn primary-btn" id="settings_save" data-ng-disabled="!(picUpload.name.$dirty|| picUpload.profilePic.$dirty) || formUploading">Save changes</button> 
    </div> 
</form> 

      //In my JS code 
      $scope.submittingForm = function(){ 
     $scope.formUploading = true; 
      }

問候！

來源

2013-12-23 5122014009

不知道你在努力達到什麼......請提供更簡單的解釋 – Abilash

嗯，說得簡單些，我想在表單上的「保存」按鈕，如果任一條件的成立被禁用：數據-NG-禁用=「（picUpload.name $髒|| picUpload.profilePic！。 $髒）。但picUpload.profilePic。$髒似乎並沒有工作，是因爲它是輸入型=文件?? – 5122014009

我想我已經找到了解決方案，它經過多次衝浪周圍的人。現在用的是在表單元素「的onchange」事件觸發設置一個標誌，以激活功能/禁用提交按鈕。 – 5122014009

我沒有用NG-上傳前，但你可以使用input元素的onchange事件。每當用戶選擇一個文件時，就會觸發onchange事件。

<input type="file" onchange="angular.element(this).scope().fileNameChanged(this)" />

的Javascript：

var app = angular.module('MainApp', []); 
    app.controller('MainCtrl', function($scope) 
    { 
    $scope.inputContainsFile = false; 
    $scope.fileNameChanged = function(element) 
    { 
     if(element.files.length > 0) 
      $scope.inputContainsFile = true; 
     else 
      $scope.inputContainsFile = false; 
    } 

    });

所以，現在你可以檢查是否inputContainsFile變量與名字段的髒檢查

來源

2013-12-24 06:01:36

是的，這就是我實際做:)只是想提兩個知識美分我首先gained- Angular的單線程運行確實使它成爲使用$ timeout的有趣案例，其次，警告調用來檢查在$ scope.fileNameChanged（）中設置的值將無法工作（寫入控制檯！）。 – 5122014009

@H sampat：無法在IE 9上工作：element.files爲null。 –

我做了一個指令一起是真實ng-file-dirty

.directive('ngFileDirty', function(){ 
    return { 
     require : '^form', 
     transclude : true, 
     link : function($scope, elm, attrs, formCtrl){ 
      elm.on('change', function(){ 
       formCtrl.$setDirty(); 
       $scope.$apply(); 
      }); 
     } 
    } 
    })

來源

2014-04-05 00:01:35 futbolpal

這是一個乾淨的解決方案！你實際上將表單設置爲髒。有沒有辦法將元素設置爲髒而不是形式？ – vcuongvu

我記不起來了，自從我編寫代碼以來，它已經有一段時間了，但我可以研究它。它是通過榆樹還是attrs物體訪問的？ – futbolpal

我不完全清楚。我嘗試了一些像elm [0]。$ dirty = true;然後在Firebug我打formName.inputName $髒，它返回正確的，但在某個地方我的網頁我 {{formName.inputName。$髒}}返回false。 – vcuongvu

$髒當輸入類型爲「文件」

回答

相關問題