需要在使用 ng-repeat 的对象内显示数组内的对象
Posted
技术标签:
【中文标题】需要在使用 ng-repeat 的对象内显示数组内的对象【英文标题】：Need to display objects within an array within an object in using ng-repeat 【发布时间】：2017-12-30 04:10:50 【问题描述】：这是我的 JSON 数据。
"_id":
"$oid": "59725b07734d1d6202a87993"
,
"anchoring": [
"id": 225,
"itemno": "AE20100",
"image": "images/prodimg/AE20100.jpg",
"name": "ANCHOR, SPADE, 26LBS",
"price": 1312,
"dfec": 3542.4,
"dpec": 4981.613357,
"category": "ANCHORING&",
"selected": 0
,
"id": 227,
"itemno": "AL01389",
"image": "images/prodimg/AL01389.jpg",
"name": "FIRE HOSE 2\"",
"price": 3.35,
"dfec": 9.045,
"dpec": 12.71982069,
"category": "ANCHORING&",
"selected": 0
,
"id": 228,
"itemno": "AL01390",
"image": "images/prodimg/AL01390.jpg",
"name": "FIRE HOSE 3\"",
"price": 4.95,
"dfec": 13.365,
"dpec": 18.79495893,
"category": "ANCHORING&",
"selected": 0
,
"id": 229,
"itemno": "AL01391",
"image": "images/prodimg/AL01391.jpg",
"name": "FIRE HOSE 1.5",
"price": 2.55,
"dfec": 6.885,
"dpec": 9.68225157,
"category": "ANCHORING&",
"selected": 0
,
"id": 279,
"itemno": "AT56551",
"image": "images/prodimg/AT56551.jpg",
"name": "CLEAT, NYLON 4 INCH",
"price": 2.2,
"dfec": 5.94,
"dpec": 8.35331508,
"category": "ANCHORING&",
"selected": 0
,
"id": 280,
"itemno": "AT56554",
"image": "images/prodimg/AT56554.jpg",
"name": "CLEAT, NYLON 8 INCH",
"price": 5.25,
"dfec": 14.175,
"dpec": 19.93404735,
"category": "ANCHORING&",
"selected": 0
,
"id": 326,
"itemno": "BK40030",
"image": "images/prodimg/BK40030.jpg",
"name": "SEABRAKE, 35 TO 55FT",
"price": 329.95,
"dfec": 890.865,
"dpec": 1252.807414,
"category": "ANCHORING&",
"selected": 0
,
"id": 680,
"itemno": "DI02420",
"image": "images/prodimg/DI02420.jpg",
"name": "ANCHORSNUBBER, 20\"",
"price": 70.25,
"dfec": 189.675,
"dpec": 266.7365384,
"category": "ANCHORING&",
"selected": 0
,
"id": 681,
"itemno": "DI02430",
"image": "images/prodimg/DI02430.jpg",
"name": "MINI-SHOCKLE 12\" BLACK",
"price": 15.75,
"dfec": 42.525,
"dpec": 59.80214205,
"category": "ANCHORING&",
"selected": 0
,
"id": 764,
"itemno": "HD10050",
"image": "images/prodimg/HD10050.jpg",
"name": "ANCHOR, HYDROBUBBLE 50SA",
"price": 930,
"dfec": 2511,
"dpec": 3531.174102,
"category": "ANCHORING&",
"selected": 0
,
"id": 768,
"itemno": "HG00108",
"image": "images/prodimg/HG00108.jpg",
"name": "EYE & EYE SWIVEL 316 8MM",
"price": 8.95,
"dfec": 24.165,
"dpec": 33.98280453,
"category": "ANCHORING&",
"selected": 0
,
"id": 769,
"itemno": "HG00126",
"image": "images/prodimg/HG00126.jpg",
"name": "ANCHOR CHAIN CONNECTION",
"price": 65.25,
"dfec": 176.175,
"dpec": 247.7517314,
"category": "ANCHORING&",
"selected": 0
,
"id": 770,
"itemno": "HG00208",
"image": "images/prodimg/HG00208.jpg",
"name": "JAW AND JAW SWIVEL 8MM",
"price": 11.5,
"dfec": 31.05,
"dpec": 43.6650561,
"category": "ANCHORING&",
"selected": 0
,
"id": 771,
"itemno": "HG00213",
"image": "images/prodimg/HG00213.jpg",
"name": "JAW AND JAW SWIVEL 13MM",
"price": 36.85,
"dfec": 99.495,
"dpec": 139.9180276,
"category": "ANCHORING&",
"selected": 0
,
"id": 772,
"itemno": "HG00306",
"image": "images/prodimg/HG00306.jpg",
"name": "EYE AND JAW SWIVEL SS 6MM",
"price": 7.15,
"dfec": 19.305,
"dpec": 27.14827401,
"category": "ANCHORING&",
"selected": 0
,
"id": 802,
"itemno": "HG02604",
"image": "images/prodimg/HG02604.jpg",
"name": "WIRE THIMBLE S/S 4mm 5/32\"",
"price": 0.7,
"dfec": 1.89,
"dpec": 2.65787298,
"category": "ANCHORING&",
"selected": 0
,
"id": 803,
"itemno": "HG02605",
"image": "images/prodimg/HG02605.jpg",
"name": "WIRE THIMBLE SS 5mm 3/16\"",
"price": 0.86,
"dfec": 2.322,
"dpec": 3.265386804,
"category": "ANCHORING&",
"selected": 0
,
"id": 804,
"itemno": "HG02606",
"image": "images/prodimg/HG02606.jpg",
"name": "WIRE THIMBLE SS 6mm 1/4\"",
"price": 1.1,
"dfec": 2.97,
"dpec": 4.17665754,
"category": "ANCHORING&",
"selected": 0
,
"id": 805,
"itemno": "HG02610",
"image": "images/prodimg/HG02610.jpg",
"name": "THIMBLE, S/S 3/8",
"price": 3.2,
"dfec": 8.64,
"dpec": 12.15027648,
"category": "ANCHORING&",
"selected": 0
,
"id": 806,
"itemno": "HG02612",
"image": "images/prodimg/HG02612.jpg",
"name": "WIRE THIMBLE SS 12mm 1/2\"",
"price": 4.4,
"dfec": 11.88,
"dpec": 16.70663016,
"category": "ANCHORING&",
"selected": 0
,
"id": 807,
"itemno": "HG02614",
"image": "images/prodimg/HG02614.jpg",
"name": "THIMBLE, S/S 9/16",
"price": 4.65,
"dfec": 12.555,
"dpec": 17.65587051,
"category": "ANCHORING&",
"selected": 0
,
"id": 808,
"itemno": "HG02658",
"image": "images/prodimg/HG02658.jpg",
"name": "THIMBLE S/S 3/4",
"price": 8.95,
"dfec": 24.165,
"dpec": 33.98280453,
"category": "ANCHORING&",
"selected": 0
,
"id": 809,
"itemno": "HG02905",
"image": "images/prodimg/HG02905.jpg",
"name": "QUICK LINK SS 5MM",
"price": 3.95,
"dfec": 10.665,
"dpec": 14.99799753,
"category": "ANCHORING&",
"selected": 0
,
"id": 810,
"itemno": "HG02908",
"image": "images/prodimg/HG02908.jpg",
"name": "QUICK LINK 8mm",
"price": 9.95,
"dfec": 26.865,
"dpec": 37.77976593,
"category": "ANCHORING&",
"selected": 0
,
"id": 830,
"itemno": "HG20012",
"image": "images/prodimg/HG20012.jpg",
"name": "CHAIN CONNECTOR, 12MM",
"price": 6.3,
"dfec": 17.01,
"dpec": 23.92085682,
"category": "ANCHORING&",
"selected": 0
,
"id": 831,
"itemno": "HG20202",
"image": "images/prodimg/HG20202.jpg",
"name": "FOLD ANCHOR (GALV. 2.5KG",
"price": 29.75,
"dfec": 80.325,
"dpec": 112.9596017,
"category": "ANCHORING&",
"selected": 0
,
"id": 832,
"itemno": "HG20203",
"image": "images/prodimg/HG20203.jpg",
"name": "ANCHOR, FOLDING 7LB",
"price": 36.75,
"dfec": 99.225,
"dpec": 139.5383315,
"category": "ANCHORING&",
"selected": 0
,
"id": 833,
"itemno": "HG20305",
"image": "images/prodimg/HG20305.jpg",
"name": "SHACKLE, BOW 3/16\" TESTED",
"price": 2.25,
"dfec": 6.075,
"dpec": 8.54316315,
"category": "ANCHORING&",
"selected": 0
,
"id": 834,
"itemno": "HG20306",
"image": "images/prodimg/HG20306.jpg",
"name": "SHACKLE, BOW 1/4\" TESTED",
"price": 2.5,
"dfec": 6.75,
"dpec": 9.4924035,
"category": "ANCHORING&",
"selected": 0
,
"id": 835,
"itemno": "HG20308",
"image": "images/prodimg/HG20308.jpg",
"name": "SHACKLE BOW 5/16 TESTED",
"price": 2.95,
"dfec": 7.965,
"dpec": 11.20103613,
"category": "ANCHORING&",
"selected": 0
,
"id": 836,
"itemno": "HG20310",
"image": "images/prodimg/HG20310.jpg",
"name": "SHACKLE, BOW 3/8 TESTED",
"price": 3.5,
"dfec": 9.45,
"dpec": 13.2893649,
"category": "ANCHORING&",
"selected": 0
,
"id": 837,
"itemno": "HG20311",
"image": "images/prodimg/HG20311.jpg",
"name": "SHACKLE, BOW 7/16 TESTED",
"price": 5.55,
"dfec": 14.985,
"dpec": 21.07313577,
"category": "ANCHORING&",
"selected": 0
,
"id": 838,
"itemno": "HG20312",
"image": "images/prodimg/HG20312.jpg",
"name": "SHACKLE BOW 1/2 TESTED",
"price": 5.25,
"dfec": 14.175,
"dpec": 19.93404735,
"category": "ANCHORING&",
"selected": 0
,
"id": 839,
"itemno": "HG20408",
"image": "images/prodimg/HG20408.jpg",
"name": "SHACKLE, BOW 5/16\" GALV",
"price": 0.95,
"dfec": 2.565,
"dpec": 3.60711333,
"category": "ANCHORING&",
"selected": 0
,
"id": 840,
"itemno": "HG20410",
"image": "images/prodimg/HG20410.jpg",
"name": "SHACKLE BOW 3/8 GALV",
"price": 1.5,
"dfec": 4.05,
"dpec": 5.6954421,
"category": "ANCHORING&",
"selected": 0
,
"id": 841,
"itemno": "HG20411",
"image": "images/prodimg/HG20411.jpg",
"name": "SHACKLE, BOW 7/16 GALV",
"price": 1.75,
"dfec": 4.725,
"dpec": 6.64468245,
"category": "ANCHORING&",
"selected": 0
,
"id": 844,
"itemno": "HG71415",
"image": "images/prodimg/HG71415.jpg",
"name": "FOLDING ANCHOR SS",
"price": 97.75,
"dfec": 263.925,
"dpec": 371.1529769,
"category": "ANCHORING&",
"selected": 0
,
"id": 845,
"itemno": "HG71425",
"image": "images/prodimg/HG71425.jpg",
"name": "FOLDING ANCHOR (AIS1316,",
"price": 162.85,
"dfec": 439.695,
"dpec": 618.335164,
"category": "ANCHORING&",
"selected": 0
,
"id": 847,
"itemno": "HG80002",
"image": "images/prodimg/HG80002.jpg",
"name": "ANCHOR, 316SS CLAW 2KG",
"price": 86.2,
"dfec": 232.74,
"dpec": 327.2980727,
"category": "ANCHORING&",
"selected": 0
,
"id": 863,
"itemno": "ID10015",
"image": "images/prodimg/ID10015.jpg",
"name": "CLEAT, ALMAG S 15",
"price": 47.15,
"dfec": 127.305,
"dpec": 179.02673,
"category": "ANCHORING&",
"selected": 0
,
"id": 864,
"itemno": "IE10701",
"image": "images/prodimg/IE10701.jpg",
"name": "FENDER COVER F7,NAVY PAIR",
"price": 75.5,
"dfec": 203.85,
"dpec": 286.6705857,
"category": "ANCHORING&",
"selected": 0
,
"id": 877,
"itemno": "IO00816",
"image": "images/prodimg/IO00816.jpg",
"name": "NO-WRENCH SAND SCREW 5.5FTx8\"",
"price": 73.8,
"dfec": 199.26,
"dpec": 280.2157513,
"category": "ANCHORING&",
"selected": 0
,
"id": 878,
"itemno": "IO10146",
"image": "images/prodimg/IO10146.jpg",
"name": "NO-WRENCH SAND SCREW 5.5FTx10\"",
"price": 77.95,
"dfec": 210.465,
"dpec": 295.9731411,
"category": "ANCHORING&",
"selected": 0
,
"id": 881,
"itemno": "JB04000",
"image": "images/prodimg/JB04000.jpg",
"name": "MOORING BALL INSERT",
"price": 122.25,
"dfec": 330.075,
"dpec": 464.1785312,
"category": "ANCHORING&",
"selected": 0
,
"id": 882,
"itemno": "JB04202",
"image": "images/prodimg/JB04202.jpg",
"name": "MOORING (PENDANT) BUOY, 18\"",
"price": 214.5,
"dfec": 579.15,
"dpec": 814.4482203,
"category": "ANCHORING&",
"selected": 0
,
"id": 883,
"itemno": "JB44000",
"image": "images/prodimg/JB44000.jpg",
"name": "MOORING BUOY, 12 SWIVEL",
"price": 155.95,
"dfec": 421.065,
"dpec": 592.1361303,
"category": "ANCHORING&",
"selected": 0
,
"id": 884,
"itemno": "JB44032",
"image": "images/prodimg/JB44032.jpg",
"name": "MOORING BUOY, 24 INCH",
"price": 274.95,
"dfec": 742.365,
"dpec": 1043.974537,
"category": "ANCHORING&",
"selected": 0
,
"id": 930,
"itemno": "LM108102",
"image": "images/prodimg/LM108102.jpg",
"name": "WINDLASS,PRO-SERIES 700W 5/16\"",
"price": 1385,
"dfec": 3739.5,
"dpec": 5258.791539,
"category": "ANCHORING&",
"selected": 0
,
"id": 931,
"itemno": "LM198311",
"image": "images/prodimg/LM198311.jpg",
"name": "WINDLASS, PRO-SERIES 1000 8MM",
"price": 1603.75,
"dfec": 4330.125,
"dpec": 6089.376845,
"category": "ANCHORING&",
"selected": 0
,
"id": 938,
"itemno": "LR20242",
"image": "images/prodimg/LR20242.jpg",
"name": "FLAT FENDER 3 X 12 X 24\" BLUE",
"price": 59.95,
"dfec": 161.865,
"dpec": 227.6278359,
"category": "ANCHORING&",
"selected": 0
,
"id": 943,
"itemno": "LZ10071",
"image": "images/prodimg/LZ10071.jpg",
"name": "SEA ANCHOR, TO 15'/4.5M BOAT",
"price": 17.95,
"dfec": 48.465,
"dpec": 68.15545713,
"category": "ANCHORING&",
"selected": 0
,
"id": 944,
"itemno": "LZ10072",
"image": "images/prodimg/LZ10072.jpg",
"name": "SEA ANCHOR, TO 20'/6M BOAT",
"price": 20.75,
"dfec": 56.025,
"dpec": 78.78694905,
"category": "ANCHORING&",
"selected": 0
,
"id": 945,
"itemno": "LZ10074",
"image": "images/prodimg/LZ10074.jpg",
"name": "SEA ANCHOR, TO 30'/9M BOAT",
"price": 33.95,
"dfec": 91.665,
"dpec": 128.9068395,
"category": "ANCHORING&",
"selected": 0
,
"id": 946,
"itemno": "LZ10075",
"image": "images/prodimg/LZ10075.jpg",
"name": "SEA ANCHOR, TO 40'/12M BOAT",
"price": 41.95,
"dfec": 113.265,
"dpec": 159.2825307,
"category": "ANCHORING&",
"selected": 0
,
"id": 947,
"itemno": "LZ10240",
"image": "images/prodimg/LZ10240.jpg",
"name": "SEA ANCHOR, TO 49FT/15M BOAT",
"price": 92.5,
"dfec": 249.75,
"dpec": 351.2189295,
"category": "ANCHORING&",
"selected": 0
,
"id": 976,
"itemno": "MA31380",
"image": "images/prodimg/MA31380.jpg",
"name": "CHAIN ISO G43 3/8 PITCH",
"price": 6.65,
"dfec": 17.955,
"dpec": 25.24979331,
"category": "ANCHORING&",
"selected": 0
,
"id": 977,
"itemno": "MA31516",
"image": "images/prodimg/MA31516.jpg",
"name": "CHAIN ISO G43 5/16 PITCH",
"price": 5.35,
"dfec": 14.445,
"dpec": 20.31374349,
"category": "ANCHORING&",
"selected": 0
,
"id": 978,
"itemno": "MA31716",
"image": "images/prodimg/MA31716.jpg",
"name": "CHAIN ISO G43 7/16 PITCH",
"price": 10.95,
"dfec": 29.565,
"dpec": 41.57672733,
"category": "ANCHORING&",
"selected": 0
,
"id": 979,
"itemno": "MA32380",
"image": "images/prodimg/MA32380.jpg",
"name": "CHAIN BBB DIA 3/8 PITCH",
"price": 8.15,
"dfec": 22.005,
"dpec": 30.94523541,
"category": "ANCHORING&",
"selected": 0
,
"id": 980,
"itemno": "MA32516",
"image": "images/prodimg/MA32516.jpg",
"name": "CHAIN BBB DIA 5/16 PITCH",
"price": 6.15,
"dfec": 16.605,
"dpec": 23.35131261,
"category": "ANCHORING&",
"selected": 0
]
这是我在 Angular 中的 html 页面。
<div class="row">
<h2 class="page-header">Anchoring Section</h2>
<p><label for="search">Search For</label> <span class="glyphicon glyphicon-search"></span> <input type="text" placeholder="Enter Search Term" ng-model="filtText" id="search"></p>
<div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="item in anchoring | filter:filtText">
<div class="thumbnail">
<img src="item.image" >
<div class="caption">
<h4 class="pull-right">USitem.price | currency</h4>
<h4>item.name</h4>
<small>Catalog Code: item.itemno</small>
</div>
<div class="ratings">
<ngcart-addtocart id=" item.id " name=" item.name " price=" item.price " quantity="1" quantity-max="30" data="item">Quote</ngcart-addtocart>
<p>
<span>Duty Free EC$: item.price * 2.7 | currency</span><br>
<span>Duty Paid EC$: item.price * 3 | currency</span>
</p>
</div>
</div>
</div>
</div>这是我的 Angular 控制器
.controller('anchoringController', ['$scope', '$stateParams', 'anchoringFactory', 'baseURL', function($scope, $stateParams, anchoringFactory, baseURL)
$scope.showAnchoring = false;
$scope.message = "Loading ...";
anchoringFactory.query(
function (response)
$scope.anchoring = response;
$scope.showAnchoring = true;
,
function (response)
$scope.message = "Error: " + response.status + " " + response.statusText;
);
console.log(anchoringFactory.query());
])如何使用 ng-repeat 让“锚定”数组的项目显示在页面上？我的控制台和 anchoring 显示 $scope.anchoring 肯定会抓取整个 JSON 对象。但是， ng-repeat 给了我一个空白的结果。我觉得我没有正确引用某些东西。如何让“锚定”中的对象显示在我的页面上？
【问题讨论】：
锚定工厂是否返回如上所示的 JSON 对象？然后尝试将行$scope.anchoring = response; 更改为 $scope.anchoring = response.anchoring;
他说 $scope.anchoring 是返回所有对象（JSON），看看我下面的答案
【参考方案1】：
啊，因为你不给工厂，我认为$scope.anchoring 包含所有对象，而不仅仅是anchoring 属性，因为你应该使用`ng-repeat="item in anchoring.anchoring"。
所以我认为视图应该是这样的：
<div class="row">
<h2 class="page-header">Anchoring Section</h2>
<p><label for="search">Search For</label> <span class="glyphicon glyphicon-search"></span> <input type="text" placeholder="Enter Search Term" ng-model="filtText" id="search"></p>
<div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="item in anchoring.anchoring | filter:filtText">
<div class="thumbnail">
<img src="item.image" >
<div class="caption">
<h4 class="pull-right">USitem.price | currency</h4>
<h4>item.name</h4>
<small>Catalog Code: item.itemno</small>
</div>
<div class="ratings">
<ngcart-addtocart id=" item.id " name=" item.name " price=" item.price " quantity="1" quantity-max="30" data="item">Quote</ngcart-addtocart>
<p>
<span>Duty Free EC$: item.price * 2.7 | currency</span><br>
<span>Duty Paid EC$: item.price * 3 | currency</span>
</p>
</div>
</div>
</div>
</div>我认为ng-repeat 给你空白，因为你在一个对象中做ng-repeat，所以你必须指定包含数组的哪个属性。
希望对你有帮助：D
【讨论】：
之前试过了，也没用。又试了一次，还是没有结果。 你可以尝试在使用ng-repeat的标签上方调用anchoring吗？它真的是上面显示的 json 或者你可能错过了一些关于数据的东西？
在 ng-repeat 行之前尝试了 anchoring，但我仍然可以将整个对象显示在页面上
之后，尝试使用 anchoring.anchoring 它应该返回一个数组吧？
嗯……它什么也没返回。这很奇怪。以上是关于需要在使用 ng-repeat 的对象内显示数组内的对象的主要内容，如果未能解决你的问题，请参考以下文章
无法更新ng-repeat（$ scope。$ apply（））中的数组更新视图不 起作用
为啥 ng-click 需要通过 $index 跟踪才能在嵌套的 ng-repeat 内触发
Angularjs svg 图 ng-repeat 在范围内
使用 ng-repeat 显示包含重复对象的对象子数组列表，每个索引有 1 个项目符号