Question

我有以下html代码，它适用于多个数组值，但是第一次数组有单个值，那时它不起作用。

我的HTML代码：

    <div ng-repeat="datas in data"">
        <div class="add-pic-box1 col-md-3" ng-repeat="img in datas.Url">
            <!-- <h1>{{datas.id}}</h1> -->
            <img  class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.url}}" />
            <span><i class="fa fa-times" ng-click="close_img(data.url._id)"></i></span>
        </div>
    </div>

这是我尝试的角度代码

$scope.data = response;

响应第一次只有一个数组对象，第一次只有它不起作用。

我第一次得到这个数组：

   [

    Mainid: "589d8761ccd6d1231e5c3882",
    Url: 
    { 
            { 
              "url": 'images/product_images/file-1486718817763.jpeg',
              "_id": 589d8761ccd6d1231e5c3883 
            } 
    }
   ]

它不起作用

第二次我得到了这个数组

   [

    Mainid: "589d8761ccd6d1231e5c3882",
    Url: 
    { 
            { 
                "url": 'images/product_images/file-1486718817763.jpeg',
                "_id": 589d8761ccd6d1231e5c3883 
            },
            {
                "url":"images/product_images/file-1486731092357.png",
                "_id":"589db754375cdc4e8351f0be"
            } 
    }
   ]

工作正常

Answer 1

以正确和更好的方式修复和重构所有内容：

确保正确的json和数组格式：数组中的对象是否必须用花括号括起来。在您的代码中，数组中有一个对象没有用大括号括起来：

而不是：

[
    Mainid: ...,
    Url: ...
]

应该是：

[
    {
        Mainid: ...,
        Url: ...
    }
]

每个字符串必须在引号内：

而不是：

"_id": 589d8761ccd6d1231e5c3883

应该是：

"_id": "589d8761ccd6d1231e5c3883"

使用数组表示列表：

而不是：

Url: { 
        {
            "url": 'images/product_images/file-1486718817763.jpeg',
            "_id": '589d8761ccd6d1231e5c3883'
        }
     }

应该是：

Url: [ 
        {
            "url": 'images/product_images/file-1486718817763.jpeg',
            "_id": '589d8761ccd6d1231e5c3883'
        }
     ]

以更好的方式命名变量，例如数组的数据，以及数组中每个元素的数据。

然后，您可以使一切工作和可读：

<!DOCTYPE html>
<html>
    <head>
        <script src="js/angular.min.js"></script>          
        <script>            
            var app = angular.module("myApp", []);          
            app.controller("myCtrl", function ($scope) {                
                $scope.datas = [ { 
                                    Mainid: "589d8761ccd6d1231e5c3882",
                                    Url: [ 
                                             {  
                                                "url":'images/product_images/file-1486718817763.jpeg',
                                                "_id": '589d8761ccd6d1231e5c3883'
                                             }
                                         ]
                                 }
                               ];   
                console.log($scope.datas);
            });
        </script>   
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="data in datas">
            <div class="add-pic-box1 col-md-3" ng-repeat="img in data.Url">             
                <img  class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.url}}" />
                <span><i class="fa fa-times" ng-click="close_img(data.url._id)"></i></span>
            </div>
        </div>
    </body>
</html>

Answer 2

我认为你只需要在数组周围添加括号，它看起来像是JavaScript对象而不是数组。试试下面的内容（注意方括号）：

Mainid: "589d8761ccd6d1231e5c3882",
Url: 
[ 
        { 
          "url": 'images/product_images/file-1486718817763.jpeg',
          "_id": 589d8761ccd6d1231e5c3883 
        } 
]

它不起作用

第二次我得到了这个数组

Mainid: "589d8761ccd6d1231e5c3882",
Url: 
[
        { 
            "url": 'images/product_images/file-1486718817763.jpeg',
            "_id": 589d8761ccd6d1231e5c3883 
        },
        {
            "url":"images/product_images/file-1486731092357.png",
            "_id":"589db754375cdc4e8351f0be"
        } 
]

Angularjs - ng-repeat不适用于单个阵列？

2 个答案: