Question

在成字符串形式显示的有角json响应中

console.log("point data "+JSON.stringify(res,data.data));

我的json响应是这种格式

"Monday : meeting invite"
...
"Notice : Come to hall"

我试图遍历视图中的上述列表

$rootScope.allData = res.data.data;

<li ng-repeat="myData in allData ">

{{allData}} //prints Monday : meeting invite
</li>

如何在迭代时做到这一点是一个挑战

<li ng-repeat="myData in allData ">

  Today:   {{allData}} // to print "Monday"
  Task:   {{allData}} //to print meeting invite
    </li>

这是因为：代表新数据

Answer 1

在数据绑定上，您可以进行split（'：'）

<li ng-repeat="myData in allData ">

Today:   {{allData.split(':')[0]}} // to print "Monday"
Task:   {{allData.split(':')[1].trim()}}} //to print meeting invite
</li>

trim（）在此处是可选的。这不是我要做的事情。这样就完成了工作，但是我更喜欢创建/映射allData一个具有两个属性的对象新数组。标题和任务。然后在迭代时访问它们。

// mappedData is mapped from allData
<li ng-repeat="data in mappedData track by data.Heading + data.Task">

Today:   {{data.Heading}} // to print "Monday"
Task:   {{data.Task}}} //to print meeting invite
</li>

更新：根据user10445503，我的代码确实需要跟踪。将其添加到我的代码中。

Answer 2

使用数组函数的优雅方式

$rootScope.allData = res.data.data.map(function(dataItem) {
    const dataItemParts = dataItem.split(':').map(function(part){
        return part.trim();
    });

    return {
        head: dataItemParts[0],
        content: dataItemParts[1]
    }
})

然后

<li ng-repeat="myData in allData ">  
  Today:   {{myData.head}} // to print "Monday"
  Task:   {{myData.content}} //to print meeting invite
</li>

要使用js删除可重复的值，您可以使用

<li ng-repeat="myData in allData track by myData.head+myData.content">  
  Today:   {{myData.head}} // to print "Monday"
  Task:   {{myData.content}} //to print meeting invite
</li>

用角度过滤数组值

2 个答案: