Angular ng-style для ::after

Я разрабатываю динамическое правило hr (горизонтальное).

В моей таблице стилей

hr.my-hr:after{
   content:'Generic'
}

В моем шаблоне

<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">

Но как мне динамически изменить содержимое в шаблоне при использовании ng-repeat????


angularjs ng-style ng-repeat
person Collin Prabhu    schedule 12.02.2016    source источник
comment
почему бы не подумать об изменении самого массива?   -  person Pankaj Parkar    schedule 12.02.2016
comment
Можно просто пример??   -  person Collin Prabhu    schedule 12.02.2016
comment
Почему бы просто не использовать ng-class и динамически добавлять и удалять класс my-hr? РЕДАКТИРОВАТЬ: вы можете использовать псевдоэлементы только в селекторе, а не в строке. источник Все, что делает ng-style, — это добавляет встроенные стили.   -  person ste2425    schedule 12.02.2016

Ответы (1)


arrow_upward
4
arrow_downward

Все, что делает ng-style, — это добавляет встроенные стили. Однако вы хотите добавить псевдоэлемент ::after. Согласно MDN:

В селекторе можно использовать только один псевдоэлемент. Он должен стоять после простых селекторов в операторе.

Из этого следует, что вы не можете использовать их встроенно, что, к сожалению, означает, что ng-style не может делать то, что вы делаете после.

Однако, если ваш ::after определен в таблице стилей, вы можете использовать ng-class для динамического добавьте этот стиль.

So

<hr ng-class="{'my-hr': <some condition to evaluate>}" />

В большинстве случаев этого будет достаточно. Однако похоже, что вы хотите динамически установить content из ::after. Так что для этого я могу представить только два варианта.

Если вы просто хотите просто добавить строковое значение, используйте привязку данных

<hr />
{{name}}

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

person ste2425    schedule 12.02.2016