Question

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

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

有没有办法制作一个可以处理angularjs中的简单元素和复杂元素的select（显示复杂的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，并在其中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;
    }
});

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

angularjs中的条件ng模型绑定

2 个答案:

使用getter和setter