通过键过滤将多个列表中的动态对象值绑定到 HTML
Bind dynamic object value inside multiple lists to HTML by filtering on key
我正在使用的服务器获取三明治组件列表,它们返回如下。
我们的三明治店对于什么部分可以搭配什么有各种规定,所以大部分内容都是动态的。
我有这种json(面包对象不保证有id = 1
,不是components[0]
处的元素):
groups:[{
id:1,
name:"Regular Sandwich components",
components:[
{
id:1,
name:"Bread",
inputtype:"list",
options: [
{id:0,name:"Hearty Italian"},
{id:1,name:"Ciabatta"}
],
.....
}
}]
我将其映射到动态表单,并从中创建一个三明治对象,将详细信息存储在平面 JSON 中,如下所示:
sandwich:{
bread:0,
.....
}
我希望能够在边栏中总结选项。我最初的尝试是:
<div class="sandwich-component bread">{{sandwich.bread}}</div>
但是那只是显示面包的id,不是很有用!
我的第二个刺是:
<div class="sandwich-component bread">{{groups[0].components[?].options[sandwich.bread]}}</div>
这感觉更好,但我不知道如何 'find' 这个组件。我已经看到 this 但我正在努力弄清楚如何更改该代码以在我的示例中工作。
我缺少什么来实现这个?
我设法用过滤器解决了这个问题 underscore.js:
app.filter('componentName', function(){
return function(option, name, components){
if(option === undefined||option === null){
return ''
}
for (var i = 0; i<components.length;i++) {
return _.findwhere(components[i].fields,{name:name}).options[option].name
};
};
});
然后我像这样使用插值 {{sandwich.bread|componentName:'bread':components}}
。
希望能帮到别人!
我正在使用的服务器获取三明治组件列表,它们返回如下。
我们的三明治店对于什么部分可以搭配什么有各种规定,所以大部分内容都是动态的。
我有这种json(面包对象不保证有id = 1
,不是components[0]
处的元素):
groups:[{
id:1,
name:"Regular Sandwich components",
components:[
{
id:1,
name:"Bread",
inputtype:"list",
options: [
{id:0,name:"Hearty Italian"},
{id:1,name:"Ciabatta"}
],
.....
}
}]
我将其映射到动态表单,并从中创建一个三明治对象,将详细信息存储在平面 JSON 中,如下所示:
sandwich:{
bread:0,
.....
}
我希望能够在边栏中总结选项。我最初的尝试是:
<div class="sandwich-component bread">{{sandwich.bread}}</div>
但是那只是显示面包的id,不是很有用!
我的第二个刺是:
<div class="sandwich-component bread">{{groups[0].components[?].options[sandwich.bread]}}</div>
这感觉更好,但我不知道如何 'find' 这个组件。我已经看到 this 但我正在努力弄清楚如何更改该代码以在我的示例中工作。
我缺少什么来实现这个?
我设法用过滤器解决了这个问题 underscore.js:
app.filter('componentName', function(){
return function(option, name, components){
if(option === undefined||option === null){
return ''
}
for (var i = 0; i<components.length;i++) {
return _.findwhere(components[i].fields,{name:name}).options[option].name
};
};
});
然后我像这样使用插值 {{sandwich.bread|componentName:'bread':components}}
。
希望能帮到别人!