Button inside a foreach loop. Want to display dynamic value as button value

[Abhijeet Sogani]

Hi all,

I am new to Knockout. 
I have a list of items like colors. I want the button to display item color like BLACK on ui. (Ignore click button for now). Basically change BUTTON VALUE with items.color.
Any help is appreciated. 
Thanks in advance.

<ul data-bind="foreach: items">

    <li>

        <button data-bind="click: $parent.removePlace">BUTTON VALUE</button>

    </li>

</ul>

[Noirabys]

Hi 

do you want to display the color ? or the text of the button?

u may use text: $data to display the text value

or you can set css classes with: css data-binding to display the color

or setting style via attr data-binding

best regards,

  noirabys

[Abhijeet Sogani]

Hi. Thanks for the reply. 
I want to display the text of the button. 
Here is the json i am using:



{"items":[{"isGiftWrap":"N","giftWrapCharge":0,"stockQuantity":580,"itemValue":"Black","save":93,"maxShippingDays":2,"minShippingDays":2,"maxOrderableQty":5,"sellingPrice":420,"mrp":6200,"basePrice":400.0,"mobileImage":false,"largeImageList":[],"mediumImageList":[],"itemId":33614551,"itemName":"Samsung Galaxy Grand Quattro (Win Duos) I8552 Dual SIM Android Mobile Phone Testcatno25-Black"},{"isGiftWrap":"N","giftWrapCharge":0,"stockQuantity":489,"itemValue":"White","save":54,"maxShippingDays":2,"minShippingDays":2,"maxOrderableQty":5,"sellingPrice":1126,"mrp":2500,"basePrice":1001.0,"mobileImage":false,"largeImageList":[],"mediumImageList":[],"itemId":33614552,"itemName":"Samsung Galaxy Grand Quattro (Win Duos) I8552 Dual SIM Android Mobile Phone Testcatno25-White"},{"isGiftWrap":"N","giftWrapCharge":0,"stockQuantity":1196,"itemValue":"Brown","save":88,"maxShippingDays":2,"minShippingDays":2,"maxOrderableQty":1,"sellingPrice":466,"mrp":3999,"basePrice":444.0,"mobileImage":false,"largeImageList":[],"mediumImageList":[],"itemId":33614776,"itemName":"Samsung Galaxy Grand Quattro (Win Duos) I8552 Dual SIM Android Mobile Phone Testcatno25-Brown"},{"isGiftWrap":"N","giftWrapCharge":0,"stockQuantity":1196,"itemValue":"Brown","save":88,"maxShippingDays":2,"minShippingDays":2,"maxOrderableQty":1,"sellingPrice":466,"mrp":3999,"basePrice":444.0,"mobileImage":false,"largeImageList":[],"mediumImageList":[],"itemId":33614777,"itemName":"Samsung Galaxy Grand Quattro (Win Duos) I8552 Dual SIM Android Mobile Phone Testcatno25-Brown"},{"isGiftWrap":"N","giftWrapCharge":0,"stockQuantity":1196,"itemValue":"Brown","save":88,"maxShippingDays":2,"minShippingDays":2,"maxOrderableQty":1,"sellingPrice":466,"mrp":3999,"basePrice":444.0,"mobileImage":false,"largeImageList":[],"mediumImageList":[],"itemId":33614778,"itemName":"Samsung Galaxy Grand Quattro (Win Duos) I8552 Dual SIM Android Mobile Phone Testcatno25-Brown"},{"isGiftWrap":"N","giftWrapCharge":0,"stockQuantity":0,"itemValue":"Grey","save":22,"maxShippingDays":2,"minShippingDays":2,"maxOrderableQty":1,"sellingPrice":14280,"mrp":18365,"basePrice":13600.0,"mobileImage":false,"largeImageList":[],"mediumImageList":[],"itemId":33614783,"itemName":"Samsung Galaxy Grand Quattro (Win Duos) I8552 Dual SIM Android Mobile Phone Testcatno25-Grey"}]}

And here is my UI code

<ul data-bind="foreach: items">

<li><span data-bind="text: itemValue"></span>

<button

data-bind="click: buttonClick, text: buttonText($data)"></button>

</li>

</ul>

I want to display itemValue i.e. black or brown on UI as button text.
Please use json parser https://www.jsoneditoronline.org/ for making the json to make some sense :)

[Noirabys]

hi,

to display the text change the button line to:

<button data-bind="text: itemValue"></button>

if you want to use the button in a form to post the value ,you have to add the value binding as well

best regards,

 noirabys

Am Mittwoch, 17. Juni 2015 14:55:34 UTC+2 schrieb Abhijeet Sogani: