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

Question

<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 视图中，我希望值字段检查该值是否包含字符串 'http'，如果是，则在其周围包裹一个锚标记，以便其可点击的其他显示常规文本值。

效果不佳，这是它的表现，

如何正确执行此操作？

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

      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",
    }

Answer 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')

会更好

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

Angular js (1.4) Using Ternary operator inside ng-repeat to show different html?

javascript

angularjs

angularjs-ng-repeat

conditional-operator

angular-ng-if