Question

我正在将淘汰应用转换为角度，我目前从服务器获取一组对象，但我想通过添加一些额外的属性来扩展每个对象。

在淘汰赛中，我会做以下事情：

var mappedResults = ko.utils.arrayMap(results, function(item) {
            item.selected = ko.observable(true);
            item.viewPreview = ko.observable(false);
            return new reed.search.Candidate(item, self.viewModel.fileDownloadFailCookieName);
        });

和Candidate viewmodel：

reed.search.Candidate = function(data, fileDownloadFailCookieName) {
    debugger
    if (data == null) {
        throw 'Error: cannot initiate candidate';
    }

    this.fileDownloadFailCookieName = fileDownloadFailCookieName;
    this.candidateId = data.CandidateId;
    this.name = data.Name;
    this.surname = data.Surname;
    this.forename = data.Forename;
    this.displayLocation = data.DisplayLocation;
    this.lastJobDetails = data.LastJobDetails;
    this.displayPayRate = data.DisplayPayRate;
    this.lastSignIn = data.LastSignIn;
    this.downloadCVUrl = data.DownloadCVUrl;

    this.additionalInfo = data.AdditionalInfo;

    this.isAvailable = (data.IsAvailable) ? "Availability confirmed" : "";
    this.availableMornings = data.AvailableMornings;
    this.availableAfternoons = data.AvailableAfternoons;
    this.availableEvenings = data.AvailableEvenings;
    this.availableWeekends = data.AvailableWeekends;
    this.availableShiftWork = data.AvailableShiftWork;
    this.availableNights = data.AvailableNights;
    this.availabilityUpdatedOn = data.AvailabilityUpdatedOn;

    this.availabilityUpdatedOnDate = "| <strong>Availability updated</strong> " + data.AvailabilityUpdatedOn;

    this.isAvailableForSomething =
        this.availableMornings
        || this.availableAfternoons
        || this.availableEvenings
        || this.availableWeekends
        || this.availableShiftWork
        || this.availableNights;

    this.viewPreview = ko.observable(false);
    this.selected = ko.observable(false);
    this.hasBeenNotified = ko.observable(false);
    this.select = function() {
        this.selected(true);
    };

    this.deSelect = function() {
        this.selected(false);

    };

    this.HasFlagSet = function(availability) {
        return availability ? "availabilitySelected" : "availabilityNotSelected";
    };

    this.ajaxCvDownload = function() {
        var path = window.location.href,
            iframeError,
            cookieName = this.fileDownloadFailCookieName;

        // download path
        path = path.match(/(.+\/)/ig)[0];
        if (path.match(/home/ig)) {
            path = path.replace('home', this.downloadCVUrl);
        } else {
            path = this.downloadCVUrl;
        };

        $('<iframe />').attr('src', path)
            .hide()
            .appendTo('body').load(function() {
                var message = decodeURIComponent(reed.shared.utils.getCookie(cookieName));
                message = message.replace(/\+/g, " ");
                if (message.length > 0 && message != "null") {
                    reed.shared.utils.showMessage(message, "Download Failed");
                }
            });
    }
}

如何在角度中实现相同的功能？

Answer 1

您不需要角度，此阵列本身包含map功能，所有现代浏览器都支持它。

var mappedResults = results.map(function(item) {
            item.selected = true;
            item.viewPreview = false;
            return new reed.search.Candidate(item, 
                    self.viewModel.fileDownloadFailCookieName);
        });

您可以改进的其他一些事情。首先，如果您使用webapi返回数据，请使用修复套管的格式化程序。查看此博客http://blogs.msmvps.com/theproblemsolver/2014/03/26/webapi-pascalcase-and-camelcase/

如果您不需要格式化程序行

this.surname = data.Surname;

然后，您可以使用angular.extend将属性复制到班级中。

angular等价于ko.utils.arrayMap或为返回的数据数组添加额外的属性？

1 个答案: