如何访问Angular JS中数组的第一个值ng-repeat
How to access first value from array in Angular JS ng-repeat
这是数组
["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>
现在请帮助我完整的代码。谢谢你。
只需做以下操作就可以了:
<td>
{{p[0]}}
</td>
有很多方法可以做到。一种方法是使用过滤器 limitTo:1和ng-repeat。
试试这个
<tr ng-repeat="x in p | |limitTo:1">
<td>
{{ x.images }}
</td>
</tr>
根据您的情况,您可以像Pankaj在评论中所说的那样在ng-repeat
中使用ng-if
。
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>
这是你的代码的工作链接
希望它能帮助你理解:)
相关文章:
- JavaScript数组包含一个值
- 使用事件更改数组的一个元素
- 从 javascript 数组创建一个 Jquery 数组
- 使用javascript匹配字符串中数组的一个元素
- Angular2从数组创建一个列表
- 在Javascript数组或一个对象中存储多个数据所需的Tweak
- 你能给被劫持的JavaScript数组添加一个函数吗
- 从带有循环的数组中一个接一个地在画布上绘制形状
- 将图像数组从一个窗口传递到另一个窗口,并在javascript的新窗口中显示图像
- 使用拆分字符串的数组创建一个对象
- 多维数组 - 创建一个表
- Javascript使用map从一维数组创建一个二维数组
- 角度范围变量中的数组只有一个成员
- 将数组从一个函数传递到另一个函数
- 将 php 数组发送到 jquery ajax 并从该数组创建一个 each 循环
- 角度.js:如何更新数组的一个项目
- 数组最后一个单元格中不需要的对象
- Setter 函数用于动态访问数组中的字段,该数组是一个属性
- jQuery从数组扩展一个json元素
- 从两个常规数组创建一个关联数组