在 ng-repeat 中解析 JSON答案

【问题标题】：Parsing JSON inside ng-repeat在 ng-repeat 中解析 JSON
【发布时间】：2015-02-11 17:37:03
【问题描述】：

是否可以在 ng-repeat 中解析 JSON？我尝试了 JSON.parse 和 angular.fromJson。

    <div ng-repeat='x in JSON.parse(element.info)'>
        {{x.key}}
    </div>

可以在这里查看：http://jsfiddle.net/y4qje54o/1/

【问题讨论】：

只需在控制器上解析它，或者从返回它的服务中解析它。否则你需要在 $scope 上添加 JSON.parse。绑定表达式根据范围进行评估。 $scope.parse = JSON.parse 在控制器上，然后在视图上使用 parse(element.info)。不过我不会那样做。查看 this answer

标签： angularjs

【解决方案1】：

为什么你不想这样做？

var ngApp = angular.module('ngApp',[]);
var ngCtrl = ngApp.controller('ngCtrl',['$scope', function($scope){

    $scope.elements = [];
    $scope.element = {};
    $scope.element.title = 'first element';
    //this comes from DB like this(as string)
    $scope.element.info = JSON.parse('[{"key":"value1"},{"key":"value2"}]');

    $scope.elements.push($scope.element);
}]);

【讨论】：

我从 webAPI 获得了一个元素数组，我不想循环数组以在控制器中应用 JSON.parse。当我开始使用模板中的元素时，我希望我能做到。
在 AngularJS 中你必须提供模型来查看。 View 的职责是根据 Model 数据进行渲染。
有效点！我正在查看带有 ng-repeat 的选项，认为循环遍历控制器/服务中的数组将是我可以避免的性能开销。

【解决方案2】：

AngularJS 处理所有 ng-repeat 使用一个嵌套在核心内并硬编码的 $watch 模块。如果你尝试编写一个不正确的 ng-repeat 会导致日志错误垃圾邮件，这是由于 ng-repeat 循环的“重新加载”。

如果您将 JSON 解析放入循环中，则会导致巨大的性能下降。从控制器你会做一次。

请注意，如果视图只生成一次数据，那么性能将是相同的。但是你会失去 MVC 模式。照顾它。

【讨论】：

【解决方案3】：

在这里查看：https://jsfiddle.net/y4qje54o/4/

相同的结果，但我使用 split、slice 和 indexOf 而不是 JSON.parse。

代码：

<div ng-repeat="x in temp=angular.equals(temp,element.info.slice(1, -1).split(','))?temp:element.info.slice(1,-1).split(',')">
    {{x.slice(x.indexOf(':')+2, -2)}}
</div>

【讨论】：