Я разрабатываю динамическое hr (горизонтальное) правило.Угловой ng-стиль для :: после
В моей таблице стилей
hr.my-hr:after{
content:'Generic'
}
В моем шаблоне
<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">
Но как я динамически изменять содержимое в шаблоне при использовании нг-повтор ????
Все ng-style действительно добавляет встроенные стили. Однако вы хотите добавить элемент psuedo ::after. Согласно MDN:
В селекторе можно использовать только один псевдоэлемент. Он должен появиться после простых селекторов в инструкции.
Так выведено из того, что вы не можете использовать их inline, что, к сожалению, ng-style не может делать то, что ваш после.
Однако, если ваш ::after определен в таблице стилей, вы можете использовать ng-class для динамического добавления этого стиля.
Так
<hr ng-class="{'my-hr': <some condition to evaluate>}" />
В большинстве случаев, что будет достаточно. Однако похоже, что вы хотите динамически установить content::after. Поэтому для этого я могу только представить два варианта.
Если вы просто хотите, чтобы просто добавить использование строкового значения Databinding
<hr />
{{name}}
Однако, если вы хотите дополнительное моделирование на этой строке создать небольшую директиву в качестве многоразового виджета может быть лучшим вариантом.
Почему бы не подумать об изменении самого массива? –
Можете ли вы просто привести пример? –
Почему бы просто не использовать 'ng-class' и динамически добавлять и удалять класс' my-hr'? EDIT: вы можете использовать только псевдо элементы в селекторе, а не в строке. [источник] (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). Все 'ng-style' делает это, добавляя встроенные стили. – ste2425