angularjs中的条件ng模型绑定

Question

我有一个模型,它是一个需要处理复杂和简单元素的数组:

{
    "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

创建一个规范化对象,该对象具有每个对象的复杂结构,其中包含空数组和指示是简单还是复杂的文件类型.

我可以用角度制作一些魔法来避免第二种方法吗？

谢谢!

Answer 1

您可以使用ngSwitch或ngIf放置正确的元素.

以ngIf为例:

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

如果不满足条件,角度将完全移除dom元素,直到条件满足为止.

Answer 2

使用getter和setter

您可以在对象上定义getter和setter,并在其中放置逻辑以检索/设置您想要有条件地获取/修改的任何其他对象.

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

同样,这可能只是在我的情况下,但仅使用它们中的任何一个都不起作用或没有按预期工作.所以我把它们放在一起使用它完美无缺.