2016-10-17 4 views
1

私は配列のオブジェクトからビルドする入力を持っています。Angular jsは 'file'タイプを 'text'タイプに変更しました[Safari]

すべてがうまくいったけど、input.type = 'file'のときは、角度がのテキストタイプに変わってしまいました。

これに気付いたことはありますか?

マイテンプレート:

<span ng-repeat="input in formInputs"> 
    <label for="{{input.id}}">{{input.label}}</label> 
    <input type="{{input.type}}" id="{{input.id}}" name="{{input.name}}" ng-model="input.insert" ng-required="input.must"> 
</span> 

マイ配列:

var formInputs = [ 
    { 
     label  : 'first name', 
     id  : 'id1', 
     type  : 'text', 
     name  : 'name1', 
     must  : true, 
     insert : '' 
    }, 
    { 
     label  : 'upload file', 
     id  : 'id2', 
     type  : 'file', 
     name  : 'name2', 
     must  : true, 
     insert : '' 
    } 
] 

マイ結果:

<span ng-repeat="input in formInputs"> 
    <label for="id1">first name</label> 
    <input type="text" id="id1" name="name1" ng-model="input.insert" ng-required="input.must"> 
    <label for="id2">upload file</label> 
    <input type="text" id="id2" name="name2" ng-model="input.insert" ng-required="input.must"> 
</span> 

EDIT:

が、私はこの流れを持っている:

<input type="{{childInput.type}}" id="{{childInput.id}}" name="{{childInput.name}}"> 

そして、この配列:

var formInputs = [ 
    { 
     id  : 'id', 
     type  : 'file', 
     name  : 'name', 
    } 
] 

毅然と[Safariのみで]:

<input type="text" id="id" name="name"> 

そのが起こってなぜ?

ありがとうございました! AngularJS Documentation for inputから

+0

(http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file)の[ng-model]の可能な複製 –

+0

私:http://jsfiddle.net/Lvc0u55v/10860/ – Hackerman

+0

いいえ、あなたのブラウザは何ですか? –

答えて

1

:提供すべての機能は、すべての入力タイプで使用できません。具体的には、ng-modelによるデータバインディングとイベント処理は、input[file]ではサポートされていません。

したがって、角度はtype="text"に戻ります。これに対する解決策を持って答えがたくさんありますが、チェックアウト:

、ここでファイルの入力に対処する方法です。

.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       var reader = new FileReader(); 
       reader.onload = function (loadEvent) { 
        scope.$apply(function() { 
         scope.fileread = loadEvent.target.result; 
        }); 
       } 
       reader.readAsDataURL(changeEvent.target.files[0]); 
      }); 
     } 
    } 
}]); 

Hackermanによってmentionnedとして、彼のjsfiddleは一目で(角1.0.1で)動作するようには思えますが、正しくモデルを投入していないようです。

+0

私は自分のオブジェクトに動的な型を持っています。私はそれを必要としています。私のオブジェクトはテンプレート内の入力型に型を入れます。なぜ "file"文字列を "text"に変更するのですか?申し訳ありませんが、私はそれを得ていませんでした。 –

+0

@ZeevKatz 'ng-model'はファイル入力をサポートしていないので、テキスト入力に戻ります。 –

+0

私の入力からng-modelを削除しても動作しません。私は私の質問を編集しています。 –

関連する問題