Hello!
I'm using amp-bind method. At the AMP form I track select event change. Next, I change the value of the page element.
This all works fine, for example:
<script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <form method="post" action-xhr="#"> <select name="items-select" on="change:AMP.setState({item: event.value})"> <option value="Milk">Milk</option> <option value="Chocolate">Chocolate</option> <option value="Cookies">Cookies</option> </select> </form> <p [text]="'Field Value: ' + item">Field Value: secret</p>
My question concerns the following: How do I read the values of the data attribute?
For example here:
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<form method="post" action-xhr="#">
<select name="items-select" on="change:AMP.setState({item: event.value})">
<option data-id="1" data-name="item-4453" data-discount="0" value="Milk">Milk</option>
<option data-id="2" data-name="item-4454" data-discount="1" value="Chocolate">Chocolate</option>
<option data-id="3" data-name="item-4455" data-discount="1" value="Cookies">Cookies</option>
</select>
</form>
How do I get the value of all the data- for the selected item?
Thanks!
<script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <form method="post" action-xhr="#"> <select name="items-select" on="change:AMP.setState({item: event.value})"> <option value="1,Milk">Milk</option> <option value="2,Chocolate">Chocolate</option> <option value="3,Cookies">Cookies</option> </select> </form> <p [text]="'Field Value: ' + item.split(',')[0] + ' Field Name: ' + item.split(',')[1]">Field Value: 1 Field Name: Milk</p>
EDIT: It turns out what you need to do is much simpler than using <amp-selector>
. Currently, there is no possible way to set data from multiple attributes. However, could use comma ,
or semicolon ;
delimited string (whichever suits you)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.