Условная привязка ng-модели в угловых

У меня есть модель, которая представляет собой массив, который должен обрабатывать сложные и простые элементы:

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

Есть ли способ сделать выбор, который может обрабатывать как простые, так и сложные элементы в angularjs (показывая URL-адрес из комплексов)?

Подход 1

Я имею в виду такие:

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

Подход 2

Создайте нормализованный объект, который будет иметь сложную структуру для каждого объекта с пустым массивом и тип файла, указывающий, является ли он простым или сложным.

Могу ли я сделать магию с помощью angular, чтобы избежать второго подхода?

Спасибо!

Ответ 1

Вы можете использовать ngSwitch или ngIf и затем поместить правильный элемент.

С ngIf например:

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

Если условие не выполнено, angular полностью удалит элемент dom, пока условие не встретится.

Ответ 2

Использование геттеров и сеттеров

Вы можете определить геттеры и сеттеры на объекте и поставить логику в него, чтобы получить/установить любой другой объект, который вы хотели бы получить/изменить условно.

Angular имеет ng-model-options="{getterSetter:true}", который вы можете использовать следующим образом:

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;
    }
};

Однако, и это может быть только в моем случае, оно само по себе не работает или не так, как ожидалось.

Также существует способ по умолчанию для JavaScript по умолчанию, используя 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;
    }
});

Опять же, это может быть только в моем случае, но использование только одного из них не работает или не работает должным образом. Поэтому я использовал их вместе, и он работает отлично.