1

我一直在玩 Angular UI Tree 拖放，遇到了一个让我很困惑的问题。json 是从我的服务中接收的。当我的控制器收到它时，我必须用一个空数组正确格式化它，这样它才能容纳孩子：

格式化：

function categorySuccessPost(data) {
    var emptyCategoryArray = {
        Categories: []
    }
    for (var i = 0; i < data.length; i++) {
        $.extend(data[i], emptyCategoryArray);
    }
     $scope.categoryData = data;
}

它现在已格式化，如下所示：

[ { "CategoryId": 27054, "MerchantId": 5594, "ProductCategoryId": 1310,
"Name": "BulkUpload", "Description": "BulkUpload", "DateCreated": 
"/Date(1446793200000-0000)/", "IsActive": true, "IsDefault": false, "ItemCount":
 5, "ResponseStatus": { "ErrorCode": "SUCCESS" }, "TotalRecordCount": 15, 
"Categories": [] }, { "CategoryId": 23267, "MerchantId": 5594, 
"ProductCategoryId": 818, "Name": "Coupon", "Description": "Coupon", 
"DateCreated": "/Date(-62135596800000-0000)/", "IsActive": true, "IsDefault":
 true, "ItemCount": 1, "ResponseStatus": { "ErrorCode": "SUCCESS" }, 
"TotalRecordCount": 15, "Categories": [] } }

尝试添加孩子时，我尝试了两种不同的功能：

功能 1（使用模型值）：

$scope.newSubItem = function (scope) {
        var currentCategoryData = scope.$modelValue;
        currentCategoryData.Categories.push({
            CategoryId: currentCategoryData.CategoryId * 10 + currentCategoryData.Categories.length,
            Name: currentCategoryData.Name + '.' + (currentCategoryData.Categories.length + 1),
            Categories: []
        });
    };

函数 2（使用数组中对象的索引，是的，我确保传递了正确的索引）：

$scope.newSubItem = function (index) {
        var array = $scope.categoryData;
        array[index].Categories.push({
            CategoryId: 12312,
            Name: 'test',
            Categories: []
        });
    };

问题是，它没有将新数据推送到所选索引，而是将 json 添加到每个Categories：

[ { "CategoryId": 27054, "MerchantId": 5594, "ProductCategoryId": 1310, 
"Name": "BulkUpload", "Description": "BulkUpload", "DateCreated": 
"/Date(1446793200000-0000)/", "IsActive": true, "IsDefault": false, "ItemCount":
 5, "ResponseStatus": { "ErrorCode": "SUCCESS" }, "TotalRecordCount": 15, 
"Categories": [ { "CategoryId": 12312, "Name": "test", "Categories": [] } ] }, {
 "CategoryId": 23267, "MerchantId": 5594, "ProductCategoryId": 818, "Name": "Coupon", "Description": "Coupon", "DateCreated": "/Date(-62135596800000-
0000)/", "IsActive": true, "IsDefault": true, "ItemCount": 1, "ResponseStatus":
 { "ErrorCode": "SUCCESS" }, "TotalRecordCount": 15, "Categories": [ { 
"CategoryId": 12312, "Name": "test", "Categories": [] } ] }

在此处输入图像描述

我没有显示 HTML，因为它似乎不是问题。这是我将其缩小到的地方，但仍然没有解释：

如果我使用通过该$.extend方法的数据，那么它会为每个父母添加一个孩子。但是，如果我复制格式化后生成的 json，将其放入对象中，然后从中读取，那么它只会像我想要的那样向所选父级添加一个子级。但是有必要添加空数组。知道为什么会发生这种情况以及任何解决方案吗？

编辑

还有一条可能很重要的信息：当我添加一个完整的类别（不同的功能）时，而不是添加一个子类别，然后尝试将一个子类别添加到新生成的类别中，那么它可以正常工作（仅将一个子类别添加到该类别):

$scope.addCategory = function () {
            var name = $scope.categoryName;
            // Temporary
            var categoryId = Math.floor((Math.random() * 50000) + 1)
            console.log(name, categoryId)
            $scope.categoryData.unshift({ CategoryId: categoryId, Name: name, Categories: [] })
            $scope.categoryName = "";
            $("#addCategoryModal").modal('hide');
            Notification.success({ message: 'Category Added Successfully!', delay: 3000 });
        }
4

1 回答 1

0

我仍然不确定为什么会发生这种情况，但这是我解决问题的解决方案：

删除 $.extend for 循环和$.extend函数：

function categorySuccessPost(data) {
     $scope.categoryData = data;
}

添加项时，检查数组是否已经初始化，如果没有，则在当前范围内创建：

$scope.newSubItem = function (scope) {
    var currentCategoryData = scope.$modelValue;
    if(currentCategoryData.Categories === 'undefined'){
        currentCategoryData.Categories = [];
    }
    currentCategoryData.Categories.push({
        CategoryId: currentCategoryData.CategoryId * 10 + currentCategoryData.Categories.length,
        Name: currentCategoryData.Name + '.' + (currentCategoryData.Categories.length + 1),
        Categories: []
    });
};

此方法的问题是您不能再将节点拖到空父节点中。

于 2016-01-09T19:16:07.990 回答