Angularjs将字符串转换为ng-repeat内的对象

时间:2015-09-28 20:54:34

标签: json angularjs object scope

我的数据库中保存了一个字符串

{"first_name":"Alex","last_name":"Hoffman"}

我将它作为对象的一部分加载到范围中,然后使用ng-repeat进行处理。范围中的其他值只是字符串

{"id":"38","fullname":"{\"first_name\":\"Alex\",\"last_name\":\"Hoffman\"}","email":"alex@mail","photo":"img.png"}

但我想在ng-repeat中使用ng-repeat来分隔名字和姓氏

<div ng-repeat="customer in customers">    
    <div class="user-info" ng-repeat="name in customer.fullname">
       {{ name.first_name }} {{ name.last_name }}
    </div>
</div>

我一无所获。我认为,问题是,全名值是一个字符串。是否可以将其转换为对象?

4 个答案:

答案 0 :(得分:6)

首先......我不知道为什么那部分会被存储为字符串......但我来这里是为了救你。

当你第一次获得数据时(我假设通过$ http.get请求)...在你将它存储到$ scope.customers之前......让我们这样做:

$http.get("Whereever/You/Get/Data.php").success(function(response){
//This is where you will run your for loop
  for (var i = 0, len = response.length; i < len; i++){
    response[i].fullname = JSON.parse(response[i].fullname)
    //This will convert the strings into objects before Ng-Repeat Runs
  //Now we will set customers = to response
   $scope.customers = response

 }
})

现在NG-Repeat被设计为遍历数组而不是对象,所以你的嵌套NG-Repeat不是必需的......你的html应该是这样的:

<div ng-repeat="customer in customers">    
<div class="user-info">
   {{ customer.fullname.first_name }} {{ customer.fullname.last_name }}
</div>

这应该可以解决您的问题:)

答案 1 :(得分:2)

你必须将字符串值转换为对象(为什么它是一个字符串,不知道)

.fullname = JSON.parse(data.fullname); //replace data.fullname with actual object

然后使用对象ngRepeat语法((k, v) in obj):

<div class="user-info" ng-repeat="(nameType, name) in customer.fullname">
    {{nameType}} : {{name}}
</div>

答案 2 :(得分:1)

我的建议是使用如下过滤器: <div class="user-info"... ng-bind="customer | customerName">...

过滤器看起来像:

angular.module('myModule').filter('customerName', [function () {
    'use strict';

    return function (customer) {
      // JSON.parse, compute name, foreach strings and return the final string
    };
  }
]);

答案 3 :(得分:1)

我有同样的问题,但我通过自定义过滤器解决了这个问题...

JSON:

.........
"FARE_CLASS": "[{\"TYPE\":\"Economy\",\"CL\":\"S \"},{\"TYPE\":\"Economy\",\"CL\":\"X \"}]",
.........

UI:

<div class="col-sm-4" ng-repeat="cls in  f.FARE_CLASS | s2o">
   <label>
       <input type="radio"  ng-click="selectedClass(cls.CL)" name="group-class" value={{cls.CL}}/><div>{{cls.CL}}</div>
   </label>
</div>

CUSTOM FILTER ::

app.filter("s2o",function () {
    return function (cls) {
        var j = JSON.parse(cls);
        //console.log(j);
        return j;
    }

});