angularjs中的条件ng-model绑定

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

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

我可以用 Angular 做一些魔法来避免第二种方法吗？

谢谢！

Answer 1

您可以使用ngSwitch 或ngIf 然后放置正确的元素。

以ngIf为例：

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

如果条件不满足，angular会彻底移除dom元素，直到条件满足。

Answer 2

使用 getter 和 setter

您可以在对象上定义 getter 和 setter，并在其中定义 put logic 以检索/设置您想要有条件地获取/修改的任何其他对象。

Angular has a 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;
    }
});

同样，这可能只是在我的情况下，但仅使用其中任何一个都不起作用或没有按预期工作。所以我把它们一起用了，效果很好。