Добавить галочку к кнопке при выборе в приложении Angular 2

#html #css #angular

#HTML #css #angular

Вопрос:

Я новичок в Angular 2 , и мне нужно настроить отображение кнопки при выборе. Для вопросов у меня есть 2 кнопки для ответа, из которых разрешено выбирать только одну (у меня все это работает), но то, что я хотел бы сделать, это добавить галочку в значение выбранных кнопок.

Я знаю, что это нужно будет сделать в CSS, что прекрасно, но я не знаю, как это сделать.

Я пробовал ниже, но, похоже, это не работает:

 .md-fab.md-primary.md-grey-ajb-red-theme.md-button, .md-raised.md-primary.md-grey-ajb-red-theme.md-button
{
    font-family:'Glyphicons Halflings';
    content:"e089";
}
  

Ниже приведен пример того, что я хочу. Когда кнопка не выбрана или невыбрана, кнопка должна просто сказать «Да» и, очевидно, иметь другой цвет:

введите описание изображения здесь

Ответ №1:

Попробуйте это:

 .md-fab.md-primary.md-grey-ajb-red-theme.md-button, .md-raised.md-primary.md-grey-ajb-red-theme.md-button
{
    position: relative;
    text-align: center;
}

.md-fab.md-primary.md-grey-ajb-red-theme.md-button:before, .md-raised.md-primary.md-grey-ajb-red-theme.md-button:before
{
    content:"e089";
    display: block;
    font-family:'Glyphicons Halflings';
    font-size: 20px;
    position: absolute;
    top: 7px; // adjust as per your need
    left: 110px; // adjust as per your need
}
  

Комментарии:

1. Спасибо за ответ, но он вообще ничего не делает, ни изображения, ни чего-либо еще

2. Пожалуйста, проверьте, генерирует ли кнопка псевдоэлементы или нет.

Ответ №2:

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