如何在打印 HTML 输出之前在 AngualrJS 标签中进行子字符串化

Question

我是

TypeScript

和

AngularJS

的新手。

以下代码将使用

<div>

打印“

TypeScript

”列表：

{{#if styles}}
  <h2 class="box-header">Styles</h2>
  <div class="box">
  {{#each styles}}
    <div class="item">
      {{#if thumbnail}}
        <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
      {{else}}
        <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" />
      {{/if}}
      <div class="details">
        <h3>{{name}}</h3>
        <p class="identifier">identifier: {{@key}}</p>
      </div>
    </div>
  {{/each}}
  </div>
{{/if}}

这是

identifier

行：

<p class="identifier">identifier: {{@key}}</p>

HTML 中的输出是以下值之一：

identifier: base_name
identifier: example_000_0_name_1
identifier: example_000_1_name_2
identifier: example_000_2_name_3
identifier: example_000_3_name_4
identifier: example_000_4_name_5

我想在生成

example_000_[n]_

HTML 时删除前缀“

identifier

”：

https://www.geeksforgeeks.org/typescript-string-substring-method/

https://www.geeksforgeeks.org/difference- Between-double-and-single-curly-brace-in-angularjs/

<p class="identifier">identifier: substring({{@key}}, len("example_000_0_"))</p>

预期输出是：

identifier: base_name
identifier: name_1
identifier: name_2
identifier: name_3
identifier: name_4
identifier: name_5

identifier

行不是

javascript

代码，所以我不知道是否可以在“

substring

”变量中

{{}}

。

我尝试过：

{{@key.substr(3)}}

：

Error: Parse error on line 35:
...>identifier: {{@key.substr(3)}}</p>    
-----------------------^
Expecting 'ID', got 'INVALID'

还尝试过：标识符：

{{("" + @key).substr(3)}}

Error: Parse error on line 35:
...fier">identifier: {{("" + @key).substr(3
-----------------------^
Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'OPEN_SEXPR'

如何

substring

“

{{@key}}

”中的“

<p class="identifier">identifier: {{@key}}</p>

”？

Answer 1

要在视图元素“内部”运行 javascript，您需要将 javascript 代码放入插值标记中

{{here}}

。

一种选择是在下划线上使用 Split()，而不是编写需要考虑到数字超过一位数的复杂子字符串。

它看起来像这样：

<p class="identifier">identifier: {{@key.split('_')[3]}}_{{@key.split('_')[4]}}</p>

这是一个工作的plunkr