Menu
This is the array
["236.jpg","239.jpg","294.jpg","748.jpg","157.jpg","446.jpg","871.jpg","778.jpg"]
I want to access
"236.jpg"
. The code right below which I am using to fetch the top array.Now how can I fetch the first item using below code ?
<tr ng-repeat="x in p">
<td>
{{ x.images }}
</td>
</tr>
Please help me to find out the sollution.
For more here is the full code
{"info":[{"id":"11","name":"brown","description":"fasdfasd","size":"fasdf","color":"5a72fb","created_at":"2015-09-08 22:33:33","updated_at":"2015-09-08 22:33:33","images":"[\"236.jpg\",\"239.jpg\",\"294.jpg\",\"748.jpg\",\"157.jpg\",\"446.jpg\",\"871.jpg\",\"778.jpg\"]"},{"id":"13","name":"fasdf","description":"asdfghjkl","size":"fasdf","color":"5a72fb","created_at":"2015-09-09 11:48:31","updated_at":"2015-09-09 11:48:31","images":"[\"910.jpg\",\"504.jpg\",\"784.jpg\"]"}]}
angular.module('myApp', []).controller('myCtrl', function($scope, $http){
$http.get('test').success(function (data){
$scope.p = angular.fromJson(data);
console.log(angular.fromJson(data));
});
});
<tbody ng-controller="myCtrl">
<tr ng-repeat="x in p">
<td ng-if="x.images ">
{{ x.images | limitTo:$index }}
</td>
<td>{{ x.size }}</td>
</tr>
</tbody>
Now please help me with full code. Thank you.
247
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
You can use $last variable within ng-repeat directive. Take a look at doc. Where computeCssClass is function of controller which takes sole argument and returns 'last' or null .
You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.
Well just doing the following will work:
<td>
{{p[0]}}
</td>
There are many ways to do it. One way would be to use filter limitTo:1 with ng-repeat.
Try this
<tr ng-repeat="x in p | |limitTo:1">
<td>
{{ x.images }}
</td>
</tr>
For your condition, you can use ng-if inside ng-repeat as Pankaj said in the comment.
var app = angular.module('ExampleApp', []);
app.controller('appController', ['$scope', function($scope) {
$scope.p = {
"info": [{
"id": "11",
"name": "brown",
"description": "fasdfasd",
"size": "fasdf",
"color": "5a72fb",
"created_at": "2015-09-08 22:33:33",
"updated_at": "2015-09-08 22:33:33",
"images": ['\"236.jpg\"','\"504.jpg\"','\"784.jpg\"']
}, {
"id": "13",
"name": "fasdf",
"description": "asdfghjkl",
"size": "fasdf",
"color": "5a72fb",
"created_at": "2015-09-09 11:48:31",
"updated_at": "2015-09-09 11:48:31",
"images": ['\"910.jpg\"','\"504.jpg\"','\"784.jpg\"']
}]
}
}]);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ExampleApp">
<div ng-controller="appController">
<div ng-repeat="x in p.info">
{{ x.images[0] +" are first"}}
</div>
</div>
</body>
</html>Here is the working Link for your code
Hope it helps you to understand :)
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
