Conditional ng-model binding in angularjs

Question

I have a model which is an array that needs to handle complex and simple elements :

{     "object" :[                "element1.html",                "element2.html",                {                    "url:"element3.html",                    "title" : "Title 3"                },                "element4.html",                "element5.html"             ] } 

Is there some way to make a select which can handle both simple and complex elements in angularjs (showing url from the complexs)?

Approach 1

I mean some like that:

ng-model="(object[$index].url ? object[$index].url : object[$index])" 

Approach 2

Make a normalized object that will have the complex structure for each object with empty arrays and a file type indicating whether is simple or complex.

Could I make some magic with angular to avoid the second approach?

Thanks!

Answer 1

You could use ngSwitch or ngIf and place the correct element then.

With ngIf for example:

<input ngIf="object[$index].url" ngModel="object[$index].url"> <input ngIf="!object[$index].url" ngModel="object[$index]"> 

If the condition is not met, angular will completely remove the dom element, till the condition will meet.