如何使用<div>angularjs ng-repeat在html页面中显示每个s的json值

s的json值。

我想在我的html页面上显示json值，每个单独的s基于我的imageurl值来自。json值。实际上，我正面临着在s上显示这些值的问题，请帮助我如何迭代和显示这些值。提前谢谢。

我想要的结果可能看起来像(对于第一次迭代):

html:

<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>

for 二次迭代:

<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>

我在这里创建了它:jsfiddle

这样我就可以在我的页面上为每个div应用样式

在ng-repeat中使用$index，它将给出0、1、2个记录

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in items">
{{item.name}}
{{$index}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
$scope.items= [{name:'a'},{name:'b'},{name:'c'}]
});
</script>
</body>
</html>

ngRepeat指令在a中的每个项实例化一个模板收集。每个模板实例都有自己的作用域，其中给定的将循环变量设置为当前集合项，并设置$index到项索引或键。

HTML代码:

 <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="myImage in myImages">
       <img ng-src="{{getImagePath(myImage)}}"/>
          <div id="3d{{$index}}" ng-style="set_color1(myImage )"></div>   
            <div id="sliceX{{$index}}"></div>    
            <div id="sliceY{{$index}}"></div>    
            <div id="sliceZ{{$index}}"></div>  
         </div>
    </div>

JS代码:

 $scope.myImages = ["image1.jpg", "image2.jpg"];
 $scope.getImagePath = function(imageName) {
 return "http://yoursite/location/" + imageName;
 };
$scope.set_color1 = function (myImage) {
return { color: "red" }
}

相关内容

最新更新

热门标签：