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

Question

我在控制器中有一个变量 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",  ]

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

Answer 1

如果您希望不必使用控制器，那么当您将数据绑定到视图时，您的数据的格式应该完全符合您的要求。（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(' ') }}。

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

concatenating string inside view using Angular

html

javascript

view

angularjs

ng-repeat