Question

我的应用程序有一个Web服务，它返回以下json数组

[{"id":1,"title":"Jeans #1","description":"Jeans Description Of Jeans #1","gender":1,"waists":[{"id":1,"sizeString":"28","enabled":true,"gender":1},{"id":3,"sizeString":"30","enabled":true,"gender":1}],"inseams":[{"id":1,"sizeString":"28","enabled":true,"gender":1},{"id":2,"sizeString":"29","enabled":true,"gender":1}],"style":{"id":1,"styleName":"Style #1","enabled":true,"gender":1},"ctr":0,"colorAndPatterns":[{"id":2,"description":"Green","background":"#00FF00","enabled":true,"gender":1},{"id":1,"description":"Red","background":"#FF0000","enabled":true,"gender":1}],"productOverviews":[{"id":3,"description":"Straight leg","enabled":true,"gender":1},{"id":1,"description":"Slim through thigh","enabled":true,"gender":1}],"enabled":true,"firstJeansImagesBycolor":[{"id":2,"colorAndPatternId":2,"enabled":true},{"id":6,"colorAndPatternId":1,"enabled":true}],"allJeansImagesByColor":[{"id":1,"colorAndPatternId":2,"enabled":true},{"id":2,"colorAndPatternId":2,"enabled":true},{"id":3,"colorAndPatternId":2,"enabled":true},{"id":4,"colorAndPatternId":2,"enabled":true},{"id":5,"colorAndPatternId":1,"enabled":true},{"id":6,"colorAndPatternId":1,"enabled":true},{"id":7,"colorAndPatternId":1,"enabled":true},{"id":8,"colorAndPatternId":1,"enabled":true}]}]

我正在使用angular的ng-repeat指令以下列方式遍历json数组

                 <div  ng-repeat="jean in currentJeans">
                    <div class="col-xs-4 jeans-listing at-repeat-twirl-in at-repeat-twirl-out" ng-repeat="colors in jean.colorAndPatterns | filter:{id:currentColorId}">

                        <a href="#/jeans-details/{{jean.id}}" class="thumbnail">
                            <img ng-src="static/images/jeans/{{jean.id}}/{{colors.id}}/{{jean.firstJeansImagesBycolor[$index].id}}.jpg" alt="Jeans Image"/>



                            <div class="caption">


                                <h5 class="text-center">{{jean.title}}</h5>


                            </div>
                            <button class="btn btn-default btn-sm" style="position: absolute;top:100px;left:30%;display:none;color:white;background-color:rgba(0,0,0,0.4)"><i class="fa fa-search"></i> Quick View</button>
                        </a>

                    </div>
                </div>

我面临的问题是这个表达式评估为空白

{{jean.firstJeansImagesBycolor[$index].id}}

这是访问json对象内部数组的正确方法，还是我正在做错的事情？

以下是JSFiddle

的链接

Answer 1

它工作得非常好。我刚刚打印出给定的路径并打印出来：

http://jsfiddle.net/pfgkna8k/3/

<div ng-app="lists">
    <div ng-controller="ProductList">
           <div  ng-repeat="jean in currentJeans">
                    <div class="col-xs-4 jeans-listing at-repeat-twirl-in at-repeat-twirl-out" ng-repeat="colors in jean.colorAndPatterns | filter:{id:currentColorId}">

                        <a href="#/jeans-details/{{jean.id}}" class="thumbnail">
                            <img ng-src="static/images/jeans/{{jean.id}}/{{colors.id}}/{{jean.firstJeansImagesBycolor[$index].id}}.jpg" alt="Jeans Image"/>
                            static/images/jeans/{{jean.id}}/{{colors.id}}/{{jean.firstJeansImagesBycolor[$index].id}}.jpg



                            <div class="caption">


                                <h5 class="text-center">{{jean.title}}</h5>


                            </div>
                            <button class="btn btn-default btn-sm" style="position: absolute;top:100px;left:30%;display:none;color:white;background-color:rgba(0,0,0,0.4)"><i class="fa fa-search"></i> Quick View</button>
                        </a>

                    </div>
                </div>
    </div>
</div>

json对象内的对象值不在嵌套的ng-repeat中进行评估

1 个答案: