Angular js（1.4）在ng-repeat中使用三元运算符来显示不同的html？

Posted 2023-02-23

【中文标题】Angular js（1.4）在ng-repeat中使用三元运算符来显示不同的html？

【英文标题】：Angular js (1.4) Using Ternary operator inside ng-repeat to show different html?

【发布时间】：2020-09-20 03:49:01

【问题描述】：

<tr ng-repeat="(field, value) in vm.params track by $index">
  <td>::field</td>
  <td  hkey="field">  value.include('http')?<a href ="value">value</a>:value </td>

</tr>

在上面的 Angular 视图中，我希望 value 字段检查该值是否包含字符串“http”，如果是，则在其周围包裹一个锚标记，以便其可点击的 else 显示常规文本值。

它的工作不正确，这是它的表现，

如何正确地做到这一点？

我试图像这样从控制器中做到这一点

      vm.params["Source Link"]?vm.params["Source Link"] = '<a href='+vm.params['Source Link']+'>link</a>':""

但数据以字符串形式显示，而不是 html，我看到它带有锚标记和所有内容。

vm.params 看起来像这样

    
    Provider Name: "MARIO BLOUNT",
    Provider State: "WV",
    Provider City: "BRIDGEPORT",
    Action Date: "06/03/2014",
    Provider Source: "HEALTH CARE FRAUD FILE",
    Provider Type: "PHARMACIST",
    Action Description: "CHARGED BY INDICTMENT WITH CONSPIRACY TO ILLEGALLY 
    PRESCRIBE AND DISTRIBUTE OXYCODONE",
    Clinic Name: "BEST CARE PHARMACY; MARIO DAVID BLOUNT RPH",
    Source Link: "https://www.dea.gov/press-releases/201",
    

【问题讨论】：

你不能用两个 ng-if 来做吗？

应该是value.includes()developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

您可以添加vm.params 的示例吗？

@Thusitha 添加了

【参考方案1】：

三元运算符不适用于这样的模板，它必须看起来像这样......

<td ng-if="value.includes('http')" hkey="field"> <a href ="value">value</a></td>
<td ng-if="!value.includes('http')" hkey="field">value</td>

但要小心，因为这对于更改检测不是很好，因为您将在每个更改检测周期运行 includes 检查 2xN 参数。

如果你能可靠地做到：

ng-if="field === 'Source Link'"

相反，它会表现得更好，或者你至少使用value.startsWith('http')会更好