如何在使用数组时在聚合物的纸下拉菜单中为纸项分配值？

我想赋值纸项目，如下面如何在使用数组时在聚合物的纸下拉菜单中为纸项分配值？

<paper-item value="1">label1</paper-item> 
<paper-item value="2">label2</paper-item> 
<paper-item value="3">label3</paper-item>

，但我使用一个数组来得到我的标签动态地这样

<paper-dropdown class="dropdown" on-core-overlay-open="{{comboDrop}}"> 
     <core-menu class="menu"> 
     <template repeat="{{processlist}}"> 
       <paper-item>{{}}</paper-item> 
      </template> 
     </core-menu> 
    </paper-dropdown>

我就当指定数组PROCESSLIST后我得到所需的信息。像

PROCESSLIST = ARR

，允许我显示在纸张的下拉菜单的那些标签。

如何为纸张项目分配值以及如何访问与每个标签对应的值？我知道

detail.item.textContent

让你的标签，我们怎么能得到的数值同样

我是相当新的JavaScript和聚合物组分所以任何帮助正确的方向将不胜感激。

谢谢！

来源

2015-03-19 Abbas

重复表达式是一个迭代器，你可以命名索引和值：

<paper-dropdown class="dropdown" on-core-overlay-open="{{comboDrop}}"> 
<core-menu class="menu"> 
    <template repeat="{{label, i in processlist}}"> 
    <paper-item value="{{i}}>{{label}}</paper-item> 
    </template> 
</core-menu> 
</paper-dropdown>

你可以阅读更多有关表达式的高分子这里：https://www.polymer-project.org/docs/polymer/expressions.html

要回答你的第二部分，我想你想要检索所选项目的下拉列表的索引？如果是这样的话，你应该使用纸张下拉菜单组件，允许您指定的值的属性，你的情况valueattr="value"和检索通过selected。检查当前选择的指数走出这里的例子：https://github.com/Polymer/paper-dropdown-menu/blob/master/demo.html

或者，如果你只想查询纸件，你也可以通过shadowRoot来做到这一点，例如在主文档中：

// Get all paper-items 
var items = document.querySelector("#dropdown").shadowRoot.querySelectors('paper-items[value]'); 

for(var i = 0; i < items.length; i++) { 
console.log("Value for item " + i + " = " + items[i].getAttribute("value")); 
}

或者，如果你想实现一个自定义组件与你自己的点击处理程序，那么它真的很简单：

在实际的项目，你只需指定一个在单击处理程序：

<paper-item value="{{i}}" on-click="{{handleClick}}">{{label}}</paper-item>

，然后将处理程序添加到您的聚合物组件的代码：

Polymer("my-component", { 

handleClick: function(e) { 
    console.log("You clicked the item with value = " + e.target.getAttribute("value")); 
} 
});

希望可以帮助。

来源

2015-03-20 20:29:23 flyandi

如何在使用数组时在聚合物的纸下拉菜单中为纸项分配值？

回答

相关问题