Question

使用ng-repeat显示了从后端获取值的数组。但是我想使用逗号分隔特定值并动态显示它。

请在下面找到HTML代码。

<li ng-repeat="history in claimGroupingHistories">
 <div class="row">
            <div class="col-lg-4 col-md col-sm-4 col-xs-4">
              <label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
            </div>
            <div id="historyOldValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.oldValueSelected}}</div>
            </div>
 </div>
</li>

此处，{{history.oldValueSelected}}中的值将类似于ABC1234, XYZ2345, IJK098。而不是在单行中显示值。我想用逗号分隔值并显示值。

例如：

现在，它显示为

Old Value Selected : ABC1234, XYZ2345, IJK098

期望输出类似，

Old Value Selected : ABC1234
                     XYZ2345
                     IJK098

使用逗号分隔来动态拆分数组值。

Testdata：

[  
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":null,
  "newValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-22T18:42:59.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
  "newValueSelected":"Group by minimum claims",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-23T06:13:07.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims",
  "newValueSelected":"Group by minimum claims, Customer Invoice No",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-23T06:14:54.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims, Customer Invoice No",
  "newValueSelected":null,
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-24T06:23:33.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":null,
  "newValueSelected":"Customer Invoice No, Group by minimum claims",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-24T06:23:58.000Z"
}
]

Answer 1

我假设history.oldValueSelected是一个字符串，因为如果oldValueSelected是一个数组，则可以这样使用ng-repeat：

<div layout="column">
    <span ng-repeat="oldValue in history.oldValueSelected" ng-bind="oldValue"></span>
</div>

现在将oldValueSelected作为字符串。我可以想到两种选择：您可以选择

获取数据后在控制器中分割值
将其拆分为ng-repeat

如果选择第二个选项，则可以执行以下操作：

<div layout="column">
    <span ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue"></span>
</div>

编辑：使用 class =“ row”

时没有得到预期的输出

<li ng-repeat="history in $ctrl.histories">
    <!-- class="row" didn't deliver the expected output-->
    <div layout="row">
        <div class="col-lg-4 col-md col-sm-4 col-xs-4">
            <!--  For testing purposes - replace with your code-->
            <label>{{history.name}}:</label>
        </div>
        <div layout="column">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" ng-repeat="oldValue in history.oldValueSelected.split(', ')">{{oldValue}}</div>
        </div>
    </div>
</li>

在控制器中进行测试：

this.histories = [
    {name: "number 1", oldValueSelected:"ABC1234, XYZ2345, IJK098"},
    {name: "number 2", oldValueSelected:"ABC1234, IJK098"},
    {name: "number 3", oldValueSelected:"IJK098"}
];

Answer 2

app.component.html
<div *ngFor="let hero of heroes.split(', ')">
 {{ hero }}
</div>

app.component.ts
private  heroes: string = "123123, 123123, 345354, 5675757";

输出：

HTML-使用逗号分隔来动态拆分数组值

2 个答案: