mercredi 13 mars 2019

angular-material-tree dynamically create checkbox or radio button based on array

I have an array as below

[ {
        name: 'Asia'
        children:[
            {
                name : 'India',
                multiselect: true,
                children:[
                    {
                        name : 'Delhi',
                        id: 'Delhi',
                        multiselect: true
                    },
                    {
                        name : 'Mumbai',
                        id: 'Mumbai',
                        multiselect: true
                    },
                    {
                        name : 'Trivandrum',
                        id: 'Trivandrum',
                        multiselect: true
                    }
                ]
            }
        ]
     },
     {
        name: 'Europe',
        multiselect: true,
        children:[
            {
                name : 'Romania',
                multiselect: false,
                children:[
                    {
                        name : 'Bucuresti',
                        id:'Bucuresti'
                        multiselect: false,              
                    },
                    {
                        name : 'Sibiu',
                        id:'Sibiu'
                        flag: false               
                    }

                ]
            }
        ]
     }
]

What I need is dynamically create checkbox, radio button based on the multiselect flag in the form a tree using angular-material Nested tree.

The conditions as below:

  • First Level of Array (Asia, Europe) is normal text (root of tree)
  • Second Level (India, Romania,.....) should be based on multiselect. If multiselect: true then it should be checkbox with the given id elsemultiselect: false it should be radio button
  • Third level(Delhi, Mumbai, Trivandrum,...)

Refernece

Please help me.




Aucun commentaire:

Enregistrer un commentaire