使用Angular在视图内连接字符串

concatenating string inside view using Angular

本文关键字：连接 字符串 视图 Angular 使用      更新时间：2023-09-26

我在控制器中有一个变量json，它有一个'element'数组，我想在同一tr标记中显示所有元素，两个元素之间有一个''。我想做以下例子：

element1 element2 element3 element4 element5 element6

做到这一点的最佳方法是什么？我想在视图中执行此操作，而不使用控制器，也不使用作用域。

下面，我复制了我的视图的代码，我想做这样的事情（它不起作用）

 <div ng-repeat="element in data.elements">
  {{ element }}
 </div>

data.elements看起来是这样的：

"elements": ["element_1", "element_1","element_2","element_3","element_4","element_5","element_6",  ]

注意：元素是数据内部的一个对象。

如果您希望不必使用控制器，那么在将数据绑定到视图时，数据的格式应该完全符合您的要求。（AKA已经按照您的要求格式化）。

否则，控制器的全部目的就是将数据操作和逻辑从视图中分离出来。

至少，如果您不能引用外部javascript文件（我猜这是您的问题[由于cms限制或其他原因]），请在脚本标记中内联定义您的控制器。

<script type='text/javascript'> 
  angular.module('nameOfYourAppModule').controller('ProperlyNamedViewController',[viewControllerFn]);
  function viewControllerFn() {
    vm = this;
    vm.data = {"elements": ["element_1", "element_1","element_2","element_3","element_4","element_5","element_6",  ]}
    vm.returnFormattedElements = function returnFormattedElementsFn() {
      return vm.data.elements.join(" ");
    }
  }
</script>

在您的HTML 中

<div ng-controller="ProperlyNamedViewController as viewModelSoIDontUseScope"> 
    {{ viewModelSoIDontUseScope.returnFormattedElements() }}
</div>

如果这太乱并且您不想使用控制器，您也可以简单地执行{{ data.elements.join(' ') }}。

相关文章：