angularjs html根据DIRECTION设置更改元素的水平对齐

ippsafx7  于 2023-10-15  发布在  Angular
关注(0)|答案(3)|浏览(126)

我有一个网站,是由于支持所有语言,包括RTL(希伯来语,阿拉伯语,波斯语等)。这些应用程序是使用AngularJS,Bootstrap和JavaScript开发的。
通过设置dir="auto",我可以正确显示文本(英语为LTR,阿拉伯语为RTL)。我的问题是元素的排列。
假设您需要显示一个列表。当语言是,比如说,英语时,列表会看起来:

- Entry 1; this is with a short tail,
- Entry 2; no tail,
- Entry 3; this is with a tail that is longer than the one of the 1st entry

如果这个列表是阿拉伯文的,它看起来如下:

دخول 1؛ هذا هو الحال مع ذيل قصير -
دخول 2؛ بلا ذيل، -
دخول 3؛ هذا هو الحال مع ذيل أطول من واحد من دخول 1ST -

显然应该是这样的

دخول 1؛ هذا هو الحال مع ذيل قصير -
                                           دخول 2؛ بلا ذيل، -
    دخول 3؛ هذا هو الحال مع ذيل أطول من واحد من دخول 1ST -

(my我向所有阿拉伯人道歉,但我不是你们中的一员,我用谷歌翻译,所以我不知道翻译的质量如何)。
那么,有没有一种方法可以测试内容的字符集并设置horizontal-align:lefthorizontal-align:right
希望我的问题很清楚…
先谢了。

swvgeqrz

swvgeqrz1#

我找到了解决办法。有关于正在接收的数据的语言的指示。然后将div设置为:

<div .... style="text-align:{{User_This_Align}}">
...

在控制器内,根据数据的语言将变量$scope.User_This_Align设置为“左”或“右”。
(This依赖于Angular的数据绑定功能)。
感谢那些发送评论的人。

fbcarpbf

fbcarpbf2#

这很简单。你所要做的就是把下面的内容放到一个css文件中:
text-align:right;--向右对齐
文本对齐:左对齐;向左对齐
文本对齐:居中;- 将其对准中心

ecfsfe2w

ecfsfe2w3#

第一,在课堂上指导。(参考W3学校的CSS方向属性)然后根据所选的语言使用ng-class更改方向。

相关问题