如何使用角树组件添加多个复选框(视图,添加,删除)并获取选中的节点值

时间:2019-05-14 07:07:32

标签: angular angular6 angular-forms

在我的需求中,树组件模板(html)页中的多个复选框用于查看,添加,删除以及如何使用角树组件获取这些复选框值。单击事件以在控制台中显示选中的节点值。任何人都可以帮助我

我引用了此链接https://angular2-tree.readme.io/docs/templates

这是我的节点

import sys
name = raw_input("Your name please ")
print("Welcome to the world of py " +name)

然后是html页面,

nodes = [
      {
        Id:1,
        Code:'code 1',
        Name:"Masters",
        ParentId:0,
        Active:true,
        View:true,
        Add:true,
        Delete:true,
        nodes: [
          { Id:2,Name:'Agents',ParentId:1,
          nodes:[
          {Id:3, Name: 'Details', ParentId:2, View:true, Add:true, Delete:true},
          {Id:4, Name: 'Contact', ParentId:2, View:true, Add:true, Delete:true},
          {Id:5, Name: 'Bank Details', ParentId:2, View:true, Add:true, Delete:true},
        ]
      },
      { Id:6,Name:'Subscribers',ParentId:1,
          nodes:[
          {Id:7, Name: 'Details',ParentId:6, View:true, Add:true, Delete:true},
          {Id:8, Name: 'Enrollment',ParentId:6, View:true, Add:true, Delete:true},
          {Id:9, Name: 'Address',ParentId:6, View:true, Add:true, Delete:true},
          {Id:10, Name: 'Proofs',ParentId:6, View:true, Add:true, Delete:true},
          {Id:11, Name: 'Nomination',ParentId:6, View:true, Add:true, Delete:true},
          {Id:12, Name: 'Security',ParentId:6, View:true, Add:true, Delete:true},

        ]
      },
      { Id:13,Name:'Group',ParentId:1,
          nodes:[
          {Id:14, Name: 'Details',ParentId:13, View:true, Add:true, Delete:true},
          {Id:15, Name: 'Subscribers',ParentId:13, View:true, Add:true, Delete:true},
          {Id:16, Name: 'Auctions',ParentId:13, View:true, Add:true, Delete:true},

        ]
      },
      { Id:17,Name:'Employee',ParentId:1,
          nodes:[
          {Id:18, Name: 'Basic',ParentId:17, View:true, Add:true, Delete:true},
          {Id:19, Name: 'Address',ParentId:17, View:true, Add:true, Delete:true},
          {Id:20, Name: 'Personal Info',ParentId:17, View:true, Add:true, Delete:true},
          {Id:21, Name: 'Family',ParentId:17, View:true, Add:true, Delete:true},
          {Id:22, Name: 'Emergency Contact',ParentId:17, View:true, Add:true, Delete:true},
          {Id:23, Name: 'Proofs',ParentId:17, View:true, Add:true, Delete:true},
          {Id:24, Name: 'Education',ParentId:17, View:true, Add:true, Delete:true},
          {Id:25, Name: 'Employeement History',ParentId:17, View:true, Add:true, Delete:true},
          {Id:26, Name: 'Reference',ParentId:17, View:true, Add:true, Delete:true},

        ]
      },

          {Id:27, Name: 'Zone',ParentId:1, View:true, Add:true, Delete:true},
          {Id:28, Name: 'Branch',ParentId:1, View:true, Add:true, Delete:true},
          {Id:29, Name: 'Scheme',ParentId:1, View:true, Add:true, Delete:true},

      ]
      }

    ];

0 个答案:

没有答案