Angular:如何根据项目的属性显示icon.png

Angular: How to show icon.png depending on the attribute of a item?

本文关键字：属性 显示 icon png 项目 何根 Angular      更新时间：2023-09-26

我有一个对象数组，如下所示：

[{"name":"Steve", "hourly_wage":16, "status":"part-time"},
{"name":"Maria", "hourly_wage":25, "status":"full-time"},
{"name":"Jose", "hourly_wage":21, "status":"former"}]

我想为每个人的就业状态显示一个图标。一个完整的圆圈代表全职，一个半圆圈代表兼职，一个空圆圈代表前者。我如何在Javascript/Angular中完成这项工作？我在想一个隐藏的if语句？

在我看来，最通用的方法是创建一个映射，然后使用它。

JS:

$scope.statusIconMapping = {"part-time": "half_circle.jpg", 
    "full-time": "full_circle.jpg", 
    "former": "empty_circle.jpg"
};

标记：

<div ng-repeat="employee in employees">
    ...
    <img src="{{statusIconMapping[employee.status]}}" />
</div>

这取决于导入这些图标的方式。它们是图像吗？字体？假设您使用图像，并且它们被命名为part-time.jpg、full-time.jpg和former.jpg，并且都被放置在some/resources文件夹中，则以下内容应该有效

<div ng-repeat="obj in list">
    <img ng-src="/resources/{{obj.status}}.jpg"/>
    {{obj.name}}
</div>

这相应地适用于字体等以及

您应该使用status属性作为条件，并在html中执行类似的操作：

<div ng-src="/images/icons/{{ status }}.png"></div>

其将输出到CCD_ 1或其匹配的任何东西。

请确保使用ng-src，而不是src，因为您会遇到这样的问题：页面在AngularJS渲染之前加载，浏览器会查找名称为{{ foo }}的文件，但该文件当然不存在。

此外，不要像其他人所展示的那样使用无关的逻辑（恕我直言）。只需在JSON中添加另一个属性，并根据其状态显示一个图标。例如，如果状态是全职的，JSON中的图标可以是"full-circle.png"，或者您可以将状态用作图标的名称，以使事情变得更简单。

例如：

{
   status: 'full-time', icon: 'full-circle.png'
}

甚至：

{
   status: 'full-time'
}

然后将您的图标命名为full-time.png，这样您就可以在HTML中轻松使用它，而无需额外的逻辑或属性。

相关文章：