Javascript angularjs中的条件ng模型绑定
我有一个模型,它是一个需要处理复杂和简单元素的数组:Javascript angularjs中的条件ng模型绑定,javascript,angularjs,Javascript,Angularjs,我有一个模型,它是一个需要处理复杂和简单元素的数组: { "object" :[ "element1.html", "element2.html", { "url:"element3.html", "title" : "Title 3" }, "element4.h
{
"object" :[
"element1.html",
"element2.html",
{
"url:"element3.html",
"title" : "Title 3"
},
"element4.html",
"element5.html"
]
}
在angularjs中是否有某种方法可以选择既可以处理简单元素又可以处理复杂元素(显示来自complex的url)
方法1
我指的是这样的一些:
ng-model="(object[$index].url ? object[$index].url : object[$index])"
方法2
创建一个规范化对象,该对象将具有每个对象的复杂结构,并具有空数组和指示是简单还是复杂的文件类型
我能用angular做些魔术来避免第二种方法吗
谢谢 您可以使用
ngSwitch
或ngIf
然后放置正确的元素
以ngIf为例:
<input ngIf="object[$index].url" ngModel="object[$index].url">
<input ngIf="!object[$index].url" ngModel="object[$index]">
如果不满足条件,angular将完全删除dom元素,直到满足条件。使用getter和setter
您可以在对象上定义getter和setter,并在其中有条件地检索/设置您想要获取/修改的任何其他对象
您可以按如下方式使用:
input(ng-model="data" ng-model-options="{getterSetter:true}")
然而,这可能只是在我的情况下,它本身并没有起作用,或者不如预期的那样
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;
}
});
同样,这可能只是我的情况,但是单独使用其中任何一个都不起作用,或者没有达到预期效果。因此,我将它们一起使用,效果非常好。如果有一个getterSetter选项,用于将模型绑定到指令(以双向数据绑定的方式),而不仅仅是采用ng-model的字段,这将非常有帮助。看起来您的条件混淆了。
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;
}
});