AMP-SCRIPT gurus!
I used a <amp-bind-macro> tag (from an example) to multiply the value of an <input type="number"> field by a constant value. It worked! Now, I'm trying to multiply different values from different INPUTs and I cannot:
find a way to reference those values.
pass those values to the (ehm...) function.
enjoy my first hours playing with AMP-SCRIPT.
Simply put...
I need to assign the result of this operation to a <span>
<span> = (12 + (inputA * 8) + (inputB * 2) + (inputC * 5))
Before you ROFLOL, that is not a code at all. I was just trying to picture the problem.
Guess what? I found how. Basically, you need to:
initialize variables with values.
add the macro (like the function, its parameters and the math operations.
tell each INPUT to update its corresponding variable.
assign the result to the SPAN.
For inputs, you need bind the value via AMP.setState()
Then in <amp-bind-macro /> expression, just call those variables, don't need arguments here.
Here's example for sum 2 input:
<amp-bind-macro id="sum" expression="numberA + numberB">
<input type="number" value="0" on="input-throttled:AMP.setState({ numberA: event.value })">
<input type="number" value="0" on="input-throttled:AMP.setState({ numberB: event.value })">
<div>
Result <span [text]="sum()">0</span>.
</div>
Related
I have a page with multiple textboxes and dropdowns with values that I am trying to validate. The values in them will be dynamic in each run.
The HTML looks something like:
<input readonly="readonly" class="form-control valid" data-val="true" data="ABC" aria-invalid="false" xpath="1">
What I want to do is grab the value of "data" for each textbox. I have used scriptAll before in such a case when I was grabbing text by using innerText. However, that won't work with a regular value such as in the HTML above.
I did try one solution that worked:
driver.value(//input[#data])
However, that just grabs the first textbox value, is there a way I can combine scriptAll with driver.value? OR would I be better off doing some JS here?
Thank you in advance!
Yes, refer the docs for scriptAll(): https://github.com/karatelabs/karate/tree/master/karate-core#scriptall
Use whatever JS works to get an attribute value. Haven't tried, but this should work, you get the idea:
* def list = scriptAll('input', "_.getAttribute('data')")
I'm creating a test app and I'm trying to set the default value of the field by calculation of other fields so this is my code:
<input type="text" class="sc table-input" v-model="staff['all_total']" :value="(staff.salary + Number(staff['overtime']) + Number(staff['educational']) + Number(staff['finance']) + Number(staff['macul']))" />
By this, I want to combine four fields (overtime + educational + finance + macul) values and add it to another field called 'all_total' then the 'all_total' also will be used for some other calculations but it's all working the only problem is I don't have access to 'all_total' anymore if I remove the property of ':value' I can't access the 'all_total' v-model if I add ':value' then I can't access. Does anyone know what's wrong with this?
v-model is just a syntax sugar, which means when you write:
<input v-model="staff['all_total']" />
you are getting:
<input :value="staff['all_total']" #input="staff['all_total'] = $event.target.value"/>
So when you use both v-model and :value in your code, :value will be used and you will not get access to staff['all_total'].
If your goal is to prepopulate staff['all_total'], it's better to do it in code, probably mounted. If your goal is to just show some composed value, which is based on those 4 fields, use computed instead.
I am trying to increment an array value inside a value.bind directive so that, in this example, three rows are created, incrementing the array number:
<tr repeat.for="i of 3">
<td><input type="text" value.bind="GS.qData.estate[**${$index}**].name"></td>
**strong text**</tr>
I have tried several permutations ( {$i}, etc ), but nothing seems to work.
Further research seems to show that the repeater won't do this, so I have other solutions.
Thanks for the reply.
Consider sample below:
//edit.html
<input type="number" step="1" value.bind="number" />
<div repeat.for="num of number">${num}</div>
//edit.ts
export class Edit {
number: number = 2;
}
I expect to see 2 divs on first page load and number of divs should change when I change number in input. Instead I get error
Value for 'number' is non-repeatable
I figured it out. If you bind input field to variable, even when variable is number, it will be changed to string when changed by user. In my case, number became string once changed in input field. I used this gist to help me solve this problem:
https://gist.github.com/jdanyow/d9d8dd9df7be2dd2f59077bad3bfb399
It offers custom element and attribute for binding numbers to input fields.
Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?
<div repeat.for="i of model.someArray.length">
<label>Some Array - Index ${i + 1}</label>
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>
and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.
== Edit ==
I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>
The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.
model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.
Your code should look like this:
<div repeat.for="item of model.someArray">
<label>Some Array - Index ${$index + 1}</label>
<input value.bind="item" some-custom-attribute.bind="item"/>
</div>
To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"