如何从Angular JS ng-repeat中的数组访问第一个值答案

【问题标题】：How to access first value from array in Angular JS ng-repeat如何从Angular JS ng-repeat中的数组访问第一个值
【发布时间】：2015-12-05 21:17:20
【问题描述】：

这是数组

["236.jpg","239.jpg","294.jpg","748.jpg","157.jpg","446.jpg","871.jpg","778.jpg"]

我要访问

“236.jpg”

。下面是我用来获取顶部数组的代码。现在如何使用下面的代码获取第一项？

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

请帮我找出解决办法。

这里有完整的代码

{"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>

现在请帮助我提供完整的代码。谢谢。

【问题讨论】：

你可以在ng-repeat中使用ng-if="$first"
在这里查看：docs.angularjs.org/api/ng/directive/ngRepeat...查看 Oliver Smith 的回答。他明白了。
我已经更新了我的问题。请给我一个解决方案

标签： javascript arrays angularjs

【解决方案1】：

只需执行以下操作即可：

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

【讨论】：

【解决方案2】：

有很多方法可以做到这一点。一种方法是将 filter limitTo:1 与 ng-repeat 一起使用。

试试这个

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

【讨论】：

不应该是 "x in p |limitTo:1" 吗？

【解决方案3】：

根据您的情况，您可以在 ng-repeat 中使用 ng-if，正如 Pankaj 在评论中所说。

  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>

这是您的代码的有效Link

希望能帮助你理解:)

【讨论】：

请再次查看我的代码。我已经更新了问题。
现在如果我想获取图像“236.jpg”的第一个值，我需要做什么？
我从 PHP 文件中获取数组。那么我将如何像您现在一样制作阵列？我的 PHP 代码是 json_encode JSON