是否可以在amp-selector
内使用amp-list
?在页面加载时,将呈现项目,但在应用过滤器时,项目不会呈现。
<!-- Filter Macros -->
<amp-bind-macro id="USFilter" expression="regions.US ? model.region == 'US' : false"></amp-bind-macro>
<amp-bind-macro id="UKFilter" expression="regions.UK ? model.region == 'UK' : false"></amp-bind-macro>
<amp-bind-macro id="filteredModels" expression="models.items[0].models.filter( model => USFilter() || UKFilter() )"></amp-bind-macro>
<!-- display models -->
<div class="center">
<amp-list width="auto" height="800" [height]="60 * filteredModels().length" layout="fixed-height" src="/data.json" [src]="filteredModels()">
<template type="amp-mustache">
<div class="">
<amp-selector layout="container" name="">
<ul>
{{#models}}
<li class="modelOption" option="{{name}}" value="{{name}}">
<div class="model-selector">
<strong>{{name}}</strong>
</div>
</li>
{{/models}}
</ul>
</amp-selector>
</div>
</template>
</amp-list>
</div>
这是数据:
{
"items": [{
"models": [
{
"name": "Tshirt 1",
"region": "US"
},
{
"name": "Tshirt 2",
"region": "US"
},
{
"name": "Tshirt 3",
"region": "US"
},
{
"name": "Tshirt 4",
"region": "UK"
},
{
"name": "Tshirt 5",
"region": "UK"
},
{
"name": "Tshirt 6",
"region": "UK"
}
]
}]
}