具有多行字符串的AngularJS和JSON

时间:2016-09-18 12:02:04

标签: javascript angularjs json ionic-framework

我已将数据组织在JSON文件中,该文件包含多行字符串,在数组中分隔。 像这样:

[
    {
        "name": "1. Some Name",
        "id": "1",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
       ]
    },
    {
        "name": "2. Some Name",
        "id": "2",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
        ]
    }
]

然后在我看来,我希望在描述中显示文字:

<ion-view view-title="">
<ion-content>
    <div class="card">
        <div class="item item-text-wrap" 
             ng-repeat="rule in rules | filter: { id: whichid }">
            {{ rule.description }}
        </div>
    </div>
</ion-content>

我的输出看起来像这样:

["Some long text 1","Some long text 2"]

我如何删除(或过滤)该字符'[','''和','?

或者,如果我使用ng-bind-html =“rule.description”指令,我得到了:

Some long text 1 ,Some long text 2

基本上这是很好的输出,但它们包含一个逗号','(在数组中)。

3 个答案:

答案 0 :(得分:1)

试试这个

 <div class="item item-text-wrap" 
         ng-repeat="rule in rules | filter: { id: whichid }">
        <span ng-repeat="d in rule.description">{{ d }}</span>
    </div>

答案 1 :(得分:0)

您也可以尝试使用Array.join()方法。

链接:Array.join()

在您的情况下:{{rule.description.join('')}}

答案 2 :(得分:0)

这也让我很伤心。但是我用自定义管道解决了它。 对制作管道进行研究,但这应该有所帮助:

pipes / arraytextfix / arraytextfix.ts(管道文件):

sys.path

另一个重要的事情是将管道文件添加到您需要在其中使用文件的模块中。

例如:

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the ArraytextfixPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'arraytextfix',
})

export class ArraytextfixPipe implements PipeTransform {
  /**
   * This is a very important pipe, as it removes a joining
   * comma, as outlined on this page: https://stackoverflow.com/questions/39557436/angularjs-and-json-with-multiline-string
   */


  transform(value) { 
    value = value.join(' ');     
    return value
  } 
}

然后,(对我而言)您就可以以相似的方式使用所有数据,甚至还可以使用转换管道:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProjectsPage } from './projects'; 
import { TranslateModule } from '@ngx-translate/core'; // For translations to work
import { ArraytextfixPipe } from "../../pipes/arraytextfix/arraytextfix" // ADD THIS

@NgModule({
  declarations: [
    ProjectsPage,
    ArraytextfixPipe // ADD THIS
  ],
  imports: [

    TranslateModule, // For translations to work
    IonicPageModule.forChild(ProjectsPage),
  ],
})
export class ProjectsPageModule {}

这基本上是我的i18n / en.json数据供稿:

  <p [innerHTML]="'PROJECTS.BODY' | translate | arraytextfix"></p>

我希望对您有所帮助