Angular: 如何根据物品的属性显示icon.png？

Question

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

[{"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 中做到这一点？我在想 ng-hide 中的某种 if 语句？

Answer 1

这取决于您导入这些图标的方式。它们是图像吗？字体？假设您使用图像并且它们被命名为 part-time.jpg、full-time.jpg、former.jpg 并且都放在某个 /resources 文件夹中

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

这也适用于字体等

Answer 2

你应该使用状态属性作为你的条件，并在你的 html 中做类似的事情：

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

...这会出现 <div src="/images/icons/part-time.png"></div> 或它匹配的任何内容。

确保使用 ng-src，而不是 src，因为您会遇到在呈现 AngularJS 之前加载页面并且浏览器将查找包含{{ foo }} 的名字当然不会存在。

此外，请避免使用其他一些人所展示的无关逻辑（恕我直言）。只需将另一个属性添加到您的 JSON 并根据其状态显示图标。例如，如果 status 是 full-time，icon 可以是 JSON 中的 'full-circle.png'，或者您可以只使用 status 作为图标的名称来使事情变得更简单。

例如：

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

甚至：

{
   status: 'full-time'
}

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

Answer 3

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

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>

Angular: 如何根据物品的属性显示icon.png？

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

javascript

if-statement

angularjs

angularjs-ng-repeat

ng-hide