如何从json获取特定值并使用angularjs ng-repeat在html中显示

Question

我是angularjs的新手，我遇到了一些问题，如何使用angularjs ng-repeat作为图像源从json文件获取并显示一个特定值以显示在视图页面上。 仅基于此键/值，我需要重复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"}
]

在这里，我需要通过key：imageurl重复并在我的html页面上显示它的值。 对于第一次迭代，它应该获取第一个imageurl（例如：/images/Image1.nii），对于第二次迭代，它应该获取第二个imageurl（例如：/images/Image2.nii）值，依此类推...我是ve在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>

请帮助我。 提前致谢。

Answer 1

您需要更改数据结构，现在这对您的任务毫无意义。 在每个imageurl对象内嵌套3D，X，Y和Z对象将使一切变得非常简单：

[
    {"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"}
    ]}
]

然后将其渲染为：

<div ng-repeat="item in newArr>     
    <div data-imgsrc="{{item.value}}">
        <div ng-repeat="part in item.parts" id="{{part.value}}"></div>
    </div>    
</div>