Displaying a value and binding a object

Help Requests
1

I’ve ran into an issue i can’t quite solve. (I hope it’s something obvious ;)) How do i display one value and bind another from the dropdown to send to a function. Right now everything works as intended except the value of select.

<div class="row" repeat.for="row of distProductList">
  <div class="col-sm-2 mt-2 mb-2">
    ${row.productName}
      <select value="${row.productName}" value.bind="product" class="form-control product-selector" change.delegate="changeRow(row, product)">
       <option></option>
       <option repeat.for="product of products" model.bind="product">
        ${product.productName}
      </option>
    </select>
 </div>

I need the ${row.productname} to show the productName from the distProductList (a list of distinct products), and i also need to bind a product if a change is registered (the model.bind from option) right now the value from select is not showing, but the one in front of the select is.

I’m quite new to Aurelia so if anything is not clear please say so!

Thanks

1 Like
2

I’ve prepared a gist here https://gist.dumber.app/?gist=fd260ea389548394d46af95ffb917d88

Can you help update it to show the issues clearer? It’s a bit hard to guess from what described.

3

Hello! Thanks for wanting to help! I’ve updated the gist to show how i want it to look (:

(does it save automatically? never used gist before haha)

1 Like
4

You will have to fork it, then update the code, and then save it, and then share the link

5

Awesome, thanks.

I hope that what i want is a little clearer now :slight_smile:
https://gist.dumber.app/?gist=1b816b0afce2ad94d491b366b30f8ff7

1 Like
6

I’m still not 100% sure what you want. So I updated my gist above with:

  • add a <let /> element to declare a product variable in the scope of each repeat item
  • bind <select/> value to that product, remove value=${row.productName} from the <select/>, as this interferes with two way binding from value.bind="product" on the <select/>
7

I’ve updated my fork with extra information. Please let me know if something needs extra clarification

1 Like
8

The ${row.productName} is outside of the <select/> because by default, there’s no value given to it yet. So it seems you just need to initialize the value in the <let/> to something like this:

    <let product.bind="products[0] || null"></let>

I’ve updated my gist as well

9

Okay so if i understand correctly i need to bind a product to my <select> in order to display the name of the product.

So that brings up another question; how do i bind the product from the distProductList row to the <let> element?

1 Like
10

<select/> displays whatever the option that matches its value, which means you should bind the value property of the <select/> element to the real value that you want to display, and ensures that one of the <option/> has that matching value as well.

1 Like
11

I’m sorry, I don’t quite get it. :sweat_smile:

I do get that the <select> displays the option that matches its value (which is a product), but how do i get the corresponding product in products from row in distProductList and bind it to the <let> element?

So how do i get [$index] in <let product.bind="products[$index] || null"></let> to be the index of the products array where row.id === product.id.

Thanks for your patience