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!

Konstantin Krass · Answer 1 · 2017-08-08T07:52:32.620

22

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.

edited Aug 08 '17 at 07:52

answered Apr 16 '14 at 11:20

Konstantin Krass

8,626
1
18
24

Looks like your conditions are mixed up. – Igor Vaschuk May 11 '17 at 15:44

score 15 · Answer 2 · edited Jun 20 '20 at 09:12

Using getters and setters

You can define getters and setters on an object and put logic in it to retrieve/set whatever other object you wanted to get/modify conditionally.

Angular has a ng-model-options="{getterSetter:true}" which you can use as follows:

input(ng-model="data" ng-model-options="{getterSetter:true}")

var data1 = "data 1";
var data2 = "data 2";
$scope.data = function(newVal) {
    if (condition) {
        if (angular.isDefined(newVal))
            data1 = newVal;
        return data1;
    } else {
        if (angular.isDefined(newVal))
            data2 = newVal;
        return data2;
    }
};

However, and this might be just in my case, it alone didn't work or not as expected.

There's also the JavaScript's default way to do the same using Object.defineProperty

var data1 = "data 1";
var data2 = "data 2";
Object.defineProperty($scope, 'data', {
    get: function() {
        if(condition)
            return data1;
        else
            return data2;
    },
    set: function(newVal) {
        if(condition)
            data1 = newVal;
        else
            data2 = newVal;
    }
});

Again, this might be just in my case, but using only either of them alone didn't work or didn't work as expected. So I used them both together and it works perfectly.

It would be really helpful if there were a getterSetter option for binding models to directives (in a two way data binding) and not just fields which take an ng-model. — Kevbot, Apr 24 '17 at 16:49

Conditional ng-model binding in angularjs

2 Answers2

Using getters and setters

Linked