AngularJS ng-repeat：将当前的绑定元素传递给条件渲染函数

如何解决AngularJS ng-repeat：将当前的绑定元素传递给条件渲染函数

我知道我们可以通过以下方式与['value1']实现条件绑定：

ng-repeat

但是正如您所看到的，这很混乱，实际上，我至少具有 5到6状态来跟踪并相应地更改显示图像图标。

在JavaScript中，我们知道有一种方法可以将当前元素传递给函数：

<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>

但是在Angular中，我尝试了以下操作，但不起作用：

在HTML中：

<img src="/images/icon.jpg" onclick="changeAttr(this)" />

在控制器中：

<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; }; 属性，并在viewer.Id属性中进行渲染，但不会渲染data-bind属性。我听说过指令方法，但似乎它只能处理基础数据的索引，而不能处理元素本身。任何帮助将不胜感激，谢谢。

解决方法

我建议使用这样的函数来获取正确的src值，但不要将其写回-这实际上是一种不好的做法。而是考虑列表或对象，其中键与迭代器相关，并且值是图像的src：

<tr ng-repeat="viewer in allViewers track by viewer.Id">
   <td>
      <img width="18" ng-src="viewerImages[viewer.Id]" alt="Viewer Status" 
         title="Click to {{!viewer.StatusByUser || viewer.StatusByUser != 1 ? 
         'publish' : 'unpublish'}}" ng-click="manageViewerStatus(viewer.StatusByUser)">
   </td>
</tr>

$scope.viewerImages = {};
$scope.allViewers.forEach((v) => {
  $scope.viewerImages[v.Id] = getViewerImage(v);
});

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

,

根据 @Ruben Helsloot 的建议，该问题本身可能不是一个好习惯。显然，并非所有技术问题都有自己直接的好答案，但是所有目标可能都有多种解决方案来实现相同的结果，其中可能包括最佳实践，适度的解决方案，甚至仅仅是解决方法。因此，寻求解决方案的人也可以分享他们的目标，因为他们的问题可能不是推荐的良好做法。

现在我的回答：为同一目标使用ng-switch

经过更广泛的研究，我发现ng-switch是我的理想解决方案：更简洁，更少的代码，更易扩展和可读的Angular本机：

<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>

请注意ng-switch-default，这是促使我选择ng-switch的主要因素之一：它可以处理null和undefined对象属性，非常适合允许您为用户提供备用和升级服务。还要注意title和alt属性，我可以在ng-switch的每个条件标记中正确定义它们-不需要复杂的代码和逻辑。请注意，我什至不必编写任何其他JavaScript来处理此问题。感谢ng-switch。