Question

我是角度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技术。

请有人帮忙吗？上述例子可能非常有用。

Answer 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

如果你正在重复使用表单，那么这是很方便的（事实上，除了目的之外，指令是多余的，实际上只需要挂钩到change事件并从那里获取对文件的引用）

您可以将其上传到服务器或用它做你喜欢的事情。

角度构造复杂域模型

1 个答案: