以角度动态创建树列表?

时间:2016-09-01 22:17:33

标签: javascript angularjs ionic-framework

我想动态地创建角度的树列表。我使用ion-tree-list plugin来做到这一点。鉴于我的请求结果,我已经创建了一些逻辑来创建列表。

到目前为止,这就是我所拥有的:

for (var i = 0; i < data.records.length; i++) {
    var l1_name = null;
    var l2_name = null;
    var l3_name = null;

    if (data.records[i].Product_Group_Name_L1__c) {
        var has = existProduct(data.records[i]);
        if (!has) {
            l1_name = data.records[i].Product_Group_Name_L1__c;
        }
    }

    if (data.records[i].Product_Group_Name_L2__c) {
        var has = existProduct(data.records[i]);
        if (!has) {
            l2_name = data.records[i].Product_Group_Name_L2__c;
        }
    } else {
        // so tem um
    }

    if (data.records[i].Product_Group_Name_L3__c) {
        var has = existProduct(data.records[i]);
        if (!has) {
            l3_name = data.records[i].Product_Group_Name_L3__c;
        }
    } else {

    }

    if (data.records[i].Product_Group_Name_L4__c) {
        var has = existProduct(data.records[i]);
        if (!has) {
            l4_name = data.records[i].Product_Group_Name_L4__c;
        }
    } else {
        var productName = data.records[i].Name;
    }

    vm.tasks.push({
        name: l1_name,
        tree: [{
            name: l2_name,
            tree: [{
                name: l3_name,
                tree: [{
                    name: productName
                }]
            }]
        }]
    });
}

var results = [];
var keys = {};

function existProduct(data) {
    var val = data.Product_Group_Name_L1__c;
    if (angular.isUndefined(keys[val])) {
        keys[val] = true;
        results.push(val);
        return true;
    } else {
        return false;
    }
}

我的data.records是这样的:

[{
    Product_Group_Name_L1__c: "OX",
    Product_Group_Name_L2__c: "INT",
    Product_Group_Name_L3__c: "MASC",
    Product_Group_Name_L4__c: null,
    Name: "PROD",
    ..
}]

1 个答案:

答案 0 :(得分:0)

在线示例(http://fer.github.io/ion-tree-list/)显示了如何通过generateSampleNodes(obj, num)创建动态数据,显示可以根据需要修改树。

https://github.com/fer/ion-tree-list/blob/gh-pages/app.js