我正在尝试根据对象数组填充表格。这个数组不包含相同类型的对象,对于每一行,我想要一个完全不同的样式和 onclick 函数,基本上是一个完全不同的行为。 例如,
var data=[
{
type:'dir-b',
data: { ... }
},
{
type:'dir-b',
data: { ... }
},
{
type:'dir-c',
data: { ... }
}
]
对于对象类型 dirB,我想要一个模板和 Controller ,对于 dirC,我想要一个完全不同的函数和模板。
我找到的解决方案是创建 3 个指令。其中一个将运行以确定要根据数据添加的其他两个指令之一。
.directive("dirA", function($compile){
return{
restrict:'A',
priority:1000,
terminal:true,
link: function(scope, element, attribute){
element.removeAttr("dir-a");//prevent endless loop
element.attr(attribute.type,"");
$compile(element)(scope);
}
}
})
.directive("dirB", function($compile){
return{
restrict:'A',
replace:true,
link: function(scope, element, attribute){
console.log("dirA");
}
}
})
.directive("dirC", function($compile){
return{
restrict:'A',
replace:true,
link: function(scope, element, attribute){
console.log("dirC");
}
}
});
使用 <tr dir-a type='{{d.type}}' ng-repeat='d in data'/>
没有达到预期的效果。要么我将 dirA 的优先级设置为 0,它可以解析该属性,但它的重复次数超过数组大小,要么我将它的优先级设置为 1000,它不能解析 b.type 并将其用作文字。
有人对此有解决方案吗?
最佳答案
您可能会使用 ngSwitch在这里。
HTML
<div ng-repeat="(key, d) in data track by $index">
<div class="tbody" ng-switch on="d.type">
<div class="row" ng-switch-when="dir-b" dir-b>{{d}}</div>
<div class="row" ng-switch-when="dir-c" dir-c>{{d}}</div>
</div>
</div>
然后您只需定义dirB
和dirC
指令。
虽然这不会显示为 html 表格,但您希望可以从中开始工作吗?
关于javascript - 根据数据动态选择指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39064036/