2016-07-13 3 views
0
<input type="file" id="file" name="file" ng-show="attachFile" /> 
    <button type="button" ng-model="attach" ng-click="add()">Attach</button> 

    <div class="panel panel-default" ng-show="displayAttachments"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Attachments</h3> 
    </div> 
    <div class="panel-body"> 
     <ul class="list-group"> 

     <li class="list-group-item">C:\fakepath\angularjs_tutorial.pdf</li> 

     <li class="list-group-item">display file path using ng-repeat in this panel</li> 

     </ul> 
    </div> 
    </div> 

を使用して入力タイプ=ファイルおよびディスプレイ・パスを使用してファイルを選択した後に機能型ファイルの入力を可能にし、私のコントローラで書かれたadd()関数を呼び出すことアタッチ私はと呼ばれるボタンがあります。 機能は、ファイルを選択した後 トリガーngのリピートに

  • を追加クリックでファイルボタン(入力タイプ=ファイル)を選択し、この選択したファイルが消えなければなら

    • 表示され、添付ファイルフィールドが表示される必要があり、ファイルの
    • パスを表示されますli ng-repeatを使ってできると思われる添付ファイルのタグ
    • 上記のファイルで別のファイルをアップロードする必要があります。この新しいファイルのパスは、既に選択されている のパスの下になければなりません。

    私のコントローラは、このコード

    $scope.attachFile = false; 
    $scope.displayAttachements = false; 
    $scope.add = function() { 
        $scope.attachFile = true; 
    } 
    
  • +0

    iは入力にNG-変更を使用することができます属性ないので、それが役立つと思いますか? JS内のonchange関数のように –

    +0

    コントローラに入力ミスがあります。 $ scope.displayAttachements = falseです。添付ファイルという言葉は間違っています。あなたのng-show = "displayAttachments"として書かれていなければなりません –

    答えて

    0

    Check This Solutionを持っている私は、ファイルの種類の入力のための結合が

    +0

    はい、これをチェックしましたが、これを本番環境にデプロイする必要があります。そうでないのですか? http://jsfiddle.net/marcenuc/ADukg/49/ですが、同じモジュールmyappにMyCtrl.prototype.setFileを含める方法がわからない可能性のある解決策が1つあります。 –

    +0

    ああ、彼は通常のjavascript関数を使用していますが、 ng-changeはファイル入力に利用できないng-modelバインディングを必要とするためです。 –

    +0

    https://github.com/danialfarid/ng-file-uploadこのフィドルをチェックしてくださいhttp://jsfiddle.net/danialfarid/maqbzv15/1118/ –