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 回答