Радиокнопка в yii2. Как записать данный код в yii2?

Question

[Александр Вербицкий]

Все очень просто!)

есть массив цветов

$colors = [
    '1' => 'a52828',
    '2' => 'a5289a',
    '3' => '000000',
    '4' => '0600ff',
    '5' => 'cacaca'
];

И данный код:

<? foreach ($colors as $id=>$color) { ?>
        <input  type="radio" id="color_<?=$id?>" name="color" value="color_<?=$id?>">
        <label for="color_<?=$id?>">
        <span style="background-color: #<?= $color ?>;">
            <img src="картинка галочки при выборе цвета" alt="Checked Icon"/>
        </span>
        </label>
<?php } ?>

преобразует радиокнопки в данный вид:


Вопрос, как получить этот код в yii2???

<? echo $form->field($products, 'color')->radioList($colors); ?>

Answer 1

[Максим Федоров]

https://stackoverflow.com/questions/28234684/yii-2...

Comments

[Александр Вербицкий]

Натыкался на данный код, но не сообразил как в сам код вставить цикл $color

[Максим Федоров]

Александр Вербицкий, цикл будет уже под капотом метода radioList()
ему нужно скормить голый массив первым параметром в radioList(), во втрором параметре вы задаете шаблон для каждого элемента

[Александр Вербицкий]

Максим Федоров, Прошу прощения, но хоть убейте не могу сообразить где? В 'item'? Если есть возможность и желание, можете написать как все должно выглядеть??

[Максим Федоров]

$colors = [
    '1' => 'a52828',
    '2' => 'a5289a',
    '3' => '000000',
    '4' => '0600ff',
    '5' => 'cacaca'
];

но лучше этот массив сделать методом в модели

далее в форме:

<?=
                    $form->field($products, 'color')
                        ->radioList(
                           $colors, //но по идее должно быть примерно так: $products->getColors()
                            [
                                'item' => function($index, $label, $name, $checked, $value) {
                                    $return = '<input  type="radio" id="color_' . $index . '" name="color" value="color_' . $index . '">';
                                    $return .= '<label for="color_' . $index . '"> ';                                  
                                    $return .= '<span style="background-color: #' . $index . ';"><img src="картинка галочки при выборе цвета" alt="Checked Icon"/></span>';
                                    $return .= '</label>';

                                    return $return;
                                }
                            ]
                        )
                    ->label(false);
                    ?>

Внимательней... я очень криво прямо тут в редакторе набросал, возможны тысячи ошибок...

[Александр Вербицкий]

Максим Федоров,
Фух, работает))) Благодарю, оч помогли.

Это если кому нужно будет:

$colors = [
    '1' => 'a52828',  // где "1" это "$value", а 'a52828' это "$label" в 'item'
    '2' => 'a5289a',
    '3' => '000000',
    '4' => '0600ff',
    '5' => 'cacaca'
];

$form->field($products, 'color')
    ->radioList(
        $colors,
        [
            'item' => function($index, $label, $name, $checked, $value) {
                        $return =  '<input type="radio" id="color-'.$index.'" name="color" value="color-'.$index.'">';
                        $return .= '<label for="color-'.$index.'">';
                        $return .= '<span style="background-color: #'.$label.';">';
                        $return .= '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon"/>';
                        $return .= '</span>';
                        $return .=  '</label>';
                return $return;
            }
        ]
    )
    ->label(false);

На выходе получаем:

<div class="color">
    <div class="form-group field-products-color">
        <input type="hidden" name="Products[color]" value=""><div id="products-color"><input type="radio" id="color-1" name="color" value="color-1"><label for="color-1"><span style="background-color: #a52828;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon"></span></label>
            <input type="radio" id="color-2" name="color" value="color-2"><label for="color-2"><span style="background-color: #a5289a;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon"></span></label>
            <input type="radio" id="color-3" name="color" value="color-3"><label for="color-3"><span style="background-color: #000000;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon"></span></label>
            <input type="radio" id="color-4" name="color" value="color-4"><label for="color-4"><span style="background-color: #0600ff;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon"></span></label>
            <input type="radio" id="color-5" name="color" value="color-5"><label for="color-5"><span style="background-color: #cacaca;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon"></span></label></div>
        <p class="help-block help-block-error"></p>
    </div>    
</div>