Geek Answers Handbook

How to access the first value from an array in Angular JS ng-repeat

This is an 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 below is what I use to get the top array. Now how can I get the first element using the code below?

 <tr ng-repeat="x in p"> <td> {{ x.images }} </td> </tr>

Please help me find a resolution.

Read more here 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 the full code. Thanks.

+5
source share
3 answers

Well, only the following will work:

 <td> {{p[0]}} </td>
+13
source

There are many ways to do this. One way is to use the limitTo: 1 filter with ng-repeat.

try it

 <tr ng-repeat="x in p | |limitTo:1"> <td> {{ x.images }} </td> </tr>
+7
source

For your condition, you can use ng-if inside ng-repeat , as Pankaj said in a 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 link link for your code

Hope this helps you understand :)

+1
source

More articles:


All Articles