0

我从正在使用的服务器获取三明治组件列表,它们返回如下。

我们的三明治店对于什么部分可以搭配什么有各种规则,所以大部分内容都是动态的。

我有这种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>

这感觉像是一个更好的选择,但我不知道如何“找到”这个组件。我已经看到了这一点,但我正在努力弄清楚如何更改该代码以在我的示例中工作。

我缺少什么来实现这个?

4

1 回答 1

0

我设法通过过滤器和 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}}

希望可以帮助别人!

于 2015-05-29T15:49:25.313 回答