如何从json获取特定的值,并使用angularjs ng-repeat在html中显示 [英] how to get specific value from json and to show in html using angularjs ng-repeat
问题描述
我是angularjs的新手,我正在面临一些问题,从json文件中获取并显示一个特定值,以便在我的视图页面上使用angularjs ng-repeat来为图像源显示。基于这个键/值,我只需要重复json文件,并且需要在我的html页面上显示具体值。
JSON:
[
{name:imageurl,value:/ images / Image1.nii},
{name:3d,value:3d0},
{name:sliceX,value:sliceX0},
{name sliceY,value:sliceY0},
{name:sliceZ,value:sliceZ0},
{name:imageurl,value :/ images / Image2.nii},
{name:3d,value:3d1},
{name:sliceX,value :sliceX1},
{name:sliceY,value:sliceY1},
{name:sliceZ,value:sliceZ1}
$ b $ p
$ b 这里我需要通过key:imageurl来重复显示它的值页。对于第一次迭代,它应该得到第一个imageurl(如:/images/Image1.nii),对于第二次迭代,它应该得到第二个imageurl(如:/images/Image2.nii)值,等等......我'在 FIDDLE 上创建了一个小提琴。请检查一次。所以我想要的输出可能是:
第一次迭代:
< div ng-repeat =item in newArr>
< div data-imgsrc =/ images / Image1.nii>
< div id =3d0>< div>
< div id =sliceX0>< / div>
< div id =sliceY0>< / div>
< div id = sliceZ0>< / div>
< / div>
< / div>
第二次迭代:
< div ng-repeat =item in newArr>
< div data-imgsrc =/ images / Image2.nii>
< div id =3d1>< / div>
< div id =sliceX1>< / div>
< div id =sliceY1>< / div>
< div id =sliceZ1>< / div>
< / div>
< / div>
请帮助我解决这个问题。提前致谢。
解决方案您需要更改数据结构,现在对于您的任务来说没有任何意义。在每个imageurl对象内嵌入3D,X,Y和Z对象会使一切变得非常简单:
[
{名称:imageurl,value:/ images / Image1.nii,部分:[
{name:3d,value:3d0},
{ name:sliceX,value:sliceX0},
{name:sliceY,value:sliceY0},
{name:sliceZ ,value:sliceZ0},
]},
{name:imageurl,value:/ images / Image2.nii [
{name:3d,value:3d1},
{name:sliceX,value:sliceX1},
{ name:sliceY,value:sliceY1},
{name:sliceZ,value:sliceZ1}
]}
]
然后你会像这样渲染它:
< div ng-repeat =newArr中的项目>
< div data-imgsrc ={{item.value}}>
< ; div ng-repeat =part in item.partsid ={{part.value}}>< / div>
< / div>
< ; / DIV>
I am new to angularjs, I am facing some issues on getting and displaying one specific value from json file to show on my view page using angularjs ng-repeat for image source. Based on this key/value only I need to repeat the json file and need to get and display the specific value on my html page.
JSON:
[
{"name":"imageurl","value":"/images/Image1.nii"},
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
{"name":"imageurl","value":"/images/Image2.nii"},
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]
Here i need to repeat through key: imageurl and to display it's value on my html page. For first iteration, it should get first imageurl(like: /images/Image1.nii), and for second iteration, it should get second imageurl(like: /images/Image2.nii) value, and so on... I've created a fiddle at: FIDDLE . Please check once. So my desired output could be:
On first iteration:
<div ng-repeat="item in newArr>
<div data-imgsrc="/images/Image1.nii">
<div id="3d0"></div>
<div id="sliceX0"></div>
<div id="sliceY0"></div>
<div id="sliceZ0"></div>
</div>
</div>
on second iteration:
<div ng-repeat="item in newArr>
<div data-imgsrc="/images/Image2.nii">
<div id="3d1"></div>
<div id="sliceX1"></div>
<div id="sliceY1"></div>
<div id="sliceZ1"></div>
</div>
</div>
Please help me regarding this. Thanks in advance.
解决方案 You need to change data structure, right now it makes little sense for the your task. Nesting 3D, X, Y and Z objects inside each imageurl objects would makes everything very simple:
[
{"name":"imageurl","value":"/images/Image1.nii", parts: [
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
]},
{"name":"imageurl","value":"/images/Image2.nii", parts: [
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]}
]
and then you would render it like this:
<div ng-repeat="item in newArr>
<div data-imgsrc="{{item.value}}">
<div ng-repeat="part in item.parts" id="{{part.value}}"></div>
</div>
</div>
这篇关于如何从json获取特定的值,并使用angularjs ng-repeat在html中显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!