通过键过滤将多个列表中的动态对象值绑定到 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}}

希望能帮到别人!