显示ng-repeat中父行的值

时间:2015-06-17 19:32:22

标签: json angularjs nested

我有点卡在这里

我有一个'parcel'对象的数组,但我想显示这个parcel的父对象的值我该如何实现呢?

我创造了这个小提琴: 我想向买家展示

var myApp = angular.module('myApp', []);

myApp.filter('createarray', function () {
return function (value, propertyName) {
    var arrayList = [];
    angular.forEach(value, function (val) {
        angular.forEach(val[propertyName], function (v) {
            arrayList.push(v)
        });
    });
    console.log(arrayList)
    return arrayList;
}
});
myApp.controller('MyCtrl', function ($scope) {


$scope.ordersList = {
    "orders": [{
        "ordernum": "PRAAA000000177800601",
            "buyer": "Donna Heywood",
            "parcels": [{
            "upid": "UPID567890123456",
                "tpid": "TPID789456789485"
        }, {
            "upid": "UPID586905486090",
                "tpid": "TPID343454645455"
        }]
    }, {
        "ordernum": "ORAAA000000367567345",
            "buyer": "Melanie Daniels",
            "parcels": [{
            "upid": "UPID456547347776",
                "tpid": "TPID645896579688"
        }, {
            "upid": "UPID768577673366",
                "tpid": "TPID784574333345"
        }]
    }]
}
});


<div ng-controller="MyCtrl">
    <ul ng-repeat="o in ordersList.orders | createarray: 'parcels'">
        <li>upid= {{o.upid}}</li>
        <li>tpid= {{o.tpid}}</li>
        <li>buyer= {{o.buyer}}</li>
    </ul>
</div>

https://jsfiddle.net/exon02/w00eo4bz/25/

2 个答案:

答案 0 :(得分:0)

在您的过滤器createarray中,您循环显示parcels数组,该数组不包含有关buyer的任何信息。因此,您应该将过滤器更新为以下内容:

myApp.filter('createarray', function () {
    return function (value, propertyName) {
        var arrayList = [];
        angular.forEach(value, function (val) {
            angular.forEach(val[propertyName], function (v) {
                v.buyer = val.buyer; //Here you should save information about buyer from your parent object, that has this property.
                arrayList.push(v)
            });
        });
        console.log(arrayList)
        return arrayList;
    }
});

答案 1 :(得分:0)

我修改了你的小提琴,它现在显示了买家。你没有必要像我一样做,但这只是用来显示小提琴中缺少的东西。

<div ng-controller="MyCtrl as ctrl">
    {{ctrl.someVar}}
    <ul ng-repeat="x in ctrl.ordersList">

        <li>buyer= {{x.buyer}}</li>
        <ul ng-repeat="p in x.parcels">
            <li>{{p.upid}}</li>
            <li>{{p.tpid}}</li>
        </ul>

    </ul>
</div>

我也改变了模型:

myApp.controller('MyCtrl', function ($scope) {
    this.someVar = 3;
    this.ordersList = 
         [{
            "ordernum": "PRAAA000000177800601",
                "buyer": "Donna Heywood",
                "parcels": 
             [{
                    "upid": "UPID567890123456",
                    "tpid": "TPID789456789485"
              }, 
              {
                    "upid": "UPID586905486090",
                    "tpid": "TPID343454645455"
             }]
          }, 
          {
            "ordernum": "ORAAA000000367567345",
                "buyer": "Melanie Daniels",
                "parcels": 
                [{
                    "upid": "UPID456547347776",
                    "tpid": "TPID645896579688"
                }, 
                {
                    "upid": "UPID768577673366",
                    "tpid": "TPID784574333345"
                }]
        }]

});

它确实显示买家和包裹信息。