代码之家 › 专栏 › 技术社区 › Karthikeyan

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

angularjs arrays html

Karthikeyan · 技术社区 · 6 年前

使用 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"
}
]

2 回复 | 直到 6 年前

Guest 6 年前

我假设history.oldvalueselected是一个字符串,因为如果oldvalueselected是一个数组,则可以使用ng repeat,如下所示:

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

现在改为OldValueSelected作为字符串。我可以考虑两种选择:你可以

获取数据后在控制器中拆分值
拆分为ng重复

如果选择第二个选项,可以执行以下操作:

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

编辑: 使用时没有得到预期的输出 类=“行”

<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"}
];

vikas biradar 6 年前

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

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

输出: