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

Question

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.

check here : docs.angularjs.org/api/ng/directive/ngRepeat... check Oliver Smith's answer. He got it. — Pat B
– Pat B, Commented Sep 9, 2015 at 19:25

kjonsson · Accepted Answer · 2015-09-09 19:19:02Z

20

Well just doing the following will work:

<td>
    {{p[0]}}
</td>

answered Sep 9, 2015 at 19:19

kjonsson

2,7972 gold badges17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ritt · Accepted Answer · 2015-09-09 19:28:43Z

8

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>

answered Sep 9, 2015 at 19:28

Ritt

3,3693 gold badges27 silver badges55 bronze badges

1 Comment

Aivar Over a year ago

Should it not be "x in p |limitTo:1" ?

Arun AK · Accepted Answer · 2015-09-10 07:49:01Z

1

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 :)

edited Sep 10, 2015 at 7:49

answered Sep 9, 2015 at 19:23

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

3 Comments

Emamul Andalib Over a year ago

Please see my code again. I have updated the question.

Emamul Andalib Over a year ago

and now if I want to take the first value of images "236.jpg", what I have to do ?

Emamul Andalib Over a year ago

I am taking the array from PHP file. So how I will manage to make the array like you did now ? My PHP code is json_encode JSON

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related