Angularjs - ng-repeat not working for a single array?
Question
I have below html code , its working fine for multiple array values , but for the first time array has single values , that time its not working .
My html code :
<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>
This is my angular code which i try
$scope.data = response;
the response has only one array object at first time , at first time only its not working.
First time i got this array :
[
Mainid: "589d8761ccd6d1231e5c3882",
Url:
{
{
"url": 'images/product_images/file-1486718817763.jpeg',
"_id": 589d8761ccd6d1231e5c3883
}
}
]
Its Not Working
Second time i got this array
[
Mainid: "589d8761ccd6d1231e5c3882",
Url:
{
{
"url": 'images/product_images/file-1486718817763.jpeg',
"_id": 589d8761ccd6d1231e5c3883
},
{
"url":"images/product_images/file-1486731092357.png",
"_id":"589db754375cdc4e8351f0be"
}
}
]
Its working fine
2 answers
solution1
2 ACCPTED 2017-02-10 14:36:49
Fix and refactor everything in the correct and better way:
- Ensure correct json and array format: objects, that is in a array or not, have to be enclosed in curly braces. In your code, there is an object in your array that's not enclosed in curly braces:
Instead of this:
[
Mainid: ...,
Url: ...
]
It should be:
[
{
Mainid: ...,
Url: ...
}
]
- Every character string must be inside quotes:
Instead of this:
"_id": 589d8761ccd6d1231e5c3883
It should be:
"_id": "589d8761ccd6d1231e5c3883"
- Use array to represent list:
Instead of this:
Url: {
{
"url": 'images/product_images/file-1486718817763.jpeg',
"_id": '589d8761ccd6d1231e5c3883'
}
}
It should be:
Url: [
{
"url": 'images/product_images/file-1486718817763.jpeg',
"_id": '589d8761ccd6d1231e5c3883'
}
]
- Name variables in a better way, for instance datas for the array, and data for each element in the array.
You then get everything working and readable:
<!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>
solution2
1 2017-02-10 13:02:34
I think you simply need to put brackets around your arrays, it look to me like they are JavaScript object and not arrays. Give the following a try (note the square brackets):
Mainid: "589d8761ccd6d1231e5c3882",
Url:
[
{
"url": 'images/product_images/file-1486718817763.jpeg',
"_id": 589d8761ccd6d1231e5c3883
}
]
Its Not Working
Second time i got this array
Mainid: "589d8761ccd6d1231e5c3882",
Url:
[
{
"url": 'images/product_images/file-1486718817763.jpeg',
"_id": 589d8761ccd6d1231e5c3883
},
{
"url":"images/product_images/file-1486731092357.png",
"_id":"589db754375cdc4e8351f0be"
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.