0

私はangular JSを初めて使用します。この質問が非常に基本的に聞こえる場合はお詫びしますが、以下のようなXML xsdモデルがあります。

  public class Client {

    private String name;
    //A client can have n number of attachments
    private List<AttachmentDetails> attachmentList;


    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public List<AttachmentDetails> getAttachmentList() {
        return attachmentList;
    }
    public void setAttachmentList(List<AttachmentDetails> attachmentList) {
        this.attachmentList = attachmentList;
    }

}

public class AttachmentDetails {
    //File URL
    private String url;
    //File Name
    private String name;
    //Attachment data
    private AtttachmentData attachmentData;

    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public AtttachmentData getAttachmentData() {
        return attachmentData;
    }
    public void setAttachmentData(AtttachmentData attachmentData) {
        this.attachmentData = attachmentData;
    }


}

public class AtttachmentData {
    //PK in the table
    private String id;
    //File data
    private byte[] data;

    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public byte[] getData() {
        return data;
    }
    public void setData(byte[] data) {
        this.data = data;
    }


}

モデルからわかるように、クライアントは n 個の添付ファイルを持つことができ、編集可能でデータベースに保存できます。クライアントを構築することはできますが、内部に添付データ (ファイル データ) を含む添付ファイルの詳細のリストを構築する方法を理解するのに苦労しています、 agular テクニックを使用します。

誰か助けてください。上記の例は非常に役立ちます。

4

1 に答える 1

1

通常の JS オブジェクトを作成するだけです。

client = {
  name: 'client name',
  attachments: []
};

client.attachments.push({
  url: 'your url',
  name: 'test.jpg'
});

を使用してファイルをアップロードする場合は<input type=file>、問題の要素から files プロパティを取得し、自分で処理する必要があります。Angular はこれを単独でうまく処理できません。私が見つけた一般的な解決策は、ディレクティブを使用することです。

このようなもの：

myModule.directive('file', function () {
    var template = '<input type="file" name="files"  accept="image/jpeg" />';
    return function (scope, elem, attrs) {
        var selector = angular.element(template);
        elem.append(selector);
        selector.bind('change', function (event) {
            scope.$apply(function () {
                scope[attrs.file] = event.target.files[0];
            });
        });
        scope.$watch(attrs.file, function (file) {
            if (!file) selector.val(file);
        });
    };
});

そして、次のようにテンプレートに追加します。

<span file="attachment" ng-model="attachment"></span>

コントロールで、スコープから添付ファイルにアクセスできるようになりました。

$scope.attachment

モデルをnullに設定して入力要素をリセットすることもできます

$scope.attachment = null

これは、フォームを再利用する場合に便利です (実際、ディレクティブは目的とは別に冗長であり、変更イベントにフックしてそこからファイルへの参照を取得するだけで済みます)

そして、それをサーバーにアップロードしたり、好きなことをしたりできます。

于 2013-04-29T12:01:38.817 に答える