Javascript AngularJS ng repeat：将当前绑定元素传递给函数以进行条件呈现

我知道我们可以通过以下方式使用

ng repeat

实现条件绑定：

<tr ng-repeat="viewer in allViewers track by viewer.Id">
   <td>
      <img width="18" ng-src="{{!viewer.StatusByUser || viewer.StatusByUser != 1 ? 
         '/images/icons/hide.svg' : '/images/icons/show-18x11.png'}}" 
         onerror="this.src='/images/icons/hide.svg'" alt="Viewer Status" 
         title="Click to {{!viewer.StatusByUser || viewer.StatusByUser != 1 ? 
         'publish' : 'unpublish'}}" ng-click="manageViewerStatus(viewer.StatusByUser)">
   </td>
</tr>

---

因此，

viewer.Id

可以返回并在

data bind

属性中呈现，但不会呈现

src

属性。我听说过指令方法，但它似乎只能处理基础数据的索引，而不能处理元素本身。任何帮助都将不胜感激，谢谢。

我建议使用这样的函数来获取正确的

src

值，但不要将其写回-这实际上是一种不好的做法。相反，考虑一个列表或一个对象，其中键与迭代器有关，该值是图像的<代码> SRC < /代码>：

$scope.viewerimage={}；
$scope.allViewers.forEach（（v）=>{
$scope.viewerimage[v.Id]=getViewerImage（v）；
});
函数getViewerImage（查看器）{
//将来可以在这里编写更复杂的逻辑，以适应更多的状态。
return！viewer.StatusByUser | | viewer.StatusByUser！=1？'/images/icons/hide.svg'：'/images/icons/show-18x11.png'；
};

正如@Ruben helslot所建议的，这个问题本身可能不是一个好的做法。显然，并不是所有的技术问题都有自己直接的好答案，但所有的目标都可能有各种解决方案来实现相同的结果，其中可能包括最佳实践、适度解决方案，甚至只是一种变通方法。因此，解决方案寻求者也可以分享他们的目标，因为他们的问题本身可能不是推荐的好做法

现在我的答案是：为了同样的目标而使用 经过更广泛的研究，我发现

ng switch

是我的完美解决方案：更干净、更少的代码、更具可扩展性和可读性、更具角度：

$scope.renderStatusImg = function (img, viewer) {
   $(img).attr("src", !viewer.StatusByUser || viewer.StatusByUser != 1 ? '/images/icons/hide.svg' : '/images/icons/show-18x11.png');
   // More complex logic can be written here in future to cater for more status.
   return viewer.Id;
};

---

请注意

ng开关默认值

，这是促使我选择

ng开关

的主要因素之一：它可以处理

null

和

未定义的

对象属性，非常适合为用户提供回退和升级服务。还要注意

title

和

alt

属性，我可以在

ng开关的每个条件标记中正确定义它们，不需要复杂的代码和逻辑。注意，我甚至不需要编写任何额外的JavaScript来处理这个问题。感谢
ng开关
，这意味着对于绑定的每次迭代，我需要再次迭代
allViewers
来填充图像src？在将
所有查看器
分配给
$scope
之前，我是否可以先填充
视图图像
？这样会更好吗？你说的“每次迭代”是什么意思？当数据发生变化时？因为这是真的，但在您的示例中也发生了，而且在
ngif
中更常见。但是，如果数据只改变了一部分，您不必计算所有数据，这是一个好处。当然，您可以先填充
viewerimage
，这没关系。AngularJS仅在代码空闲时触发
$digest
循环，因此如果在同一个函数中分配它们，顺序不是问题。我的意思是，当每个
都被绑定时，您的代码是否会再次在整个
AllViewer
数据源中循环？也就是说，如果我有20个查看器，它是否会循环20x，以确定每个
img
的
src
？我正在考虑使用
Map
API来简化代码和逻辑，因为不仅
src
，还需要根据
StatusByUser
更改许多其他属性，例如
title
和
alt
。不，我是想在控制器中进行更改，获取数据或初始化控制器时。这意味着只做一次。
<img data-bind="{{renderStatusImg(this, viewer)}}" width="18" alt="Viewer Status"
   title="Click to publish" ng-click="manageViewerStatus(viewer.StatusByUser)">

$scope.renderStatusImg = function (img, viewer) {
   $(img).attr("src", !viewer.StatusByUser || viewer.StatusByUser != 1 ? '/images/icons/hide.svg' : '/images/icons/show-18x11.png');
   // More complex logic can be written here in future to cater for more status.
   return viewer.Id;
};

<tr ng-repeat="viewer in allViewers track by viewer.Id" ng-switch on="viewer.StatusByUser">
   <td>
      <img ng-switch-when="0" src="/images/icons/hide.svg" width="18" alt="Draft" title="Click to publish" ng-click="manageViewerStatus(viewer)">
      <img ng-switch-when="1" src="/images/icons/show-18x11.png" width="18" alt="Published" title="Click to unpublish" ng-click="manageViewerStatus(viewer)">
      <img ng-switch-default src="/images/icons/hide.svg" width="18" alt="Old version" title="Click to fix" ng-click="manageViewerStatus(viewer)">
   </td>
   <td>
      <!-- More other columns that bound by viewer.StatusByUser can be benefited 
           from this approach. -->
   </td>
</tr>