Javascript 通过按键过滤将多个列表中的动态对象值绑定到HTML

我从与我一起工作的服务器上得到一个三明治组件列表，它们返回时如下图所示

我们的三明治店有各种各样的规则，关于哪些部分可以搭配什么，所以大部分内容都是动态的

我有这样一种json面包对象不保证id=1，不是组件[0]上的元素：

我将其映射到动态表单，并从中创建一个三明治对象，将细节存储在平面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>

这感觉更好，但我不知道如何“找到”这个组件。我已经看到了，但我正在努力找出如何修改代码以使其在我的示例中工作

---

实现这一点我缺少什么？

我通过一个过滤器和下划线解决了这个问题。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
        };
    };
});

我使用类似于so{{sandwich.bread | componentName:'bread'：components}的插值

希望能帮助别人

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
        };
    };
});