Ci-dessous, je vais partager avec vous un exemple de parcours et d'affichage des données de collection AngularJS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
Comme indiqué ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS集合数据遍历显示</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<table width="100%" border="1">
<tr>
<td>序号</td>
<td>商品编号</td>
<td>商品名称</td>
<td>价格</td>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("myctrl",["$scope",function($scope){
$scope.products = [
{
id:1001,
name:'数码相机',
price:5000
},
{
id:1002,
name:'华为手机',
price:4000
}
];
}])
</script>
</html>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. avenir.
Articles associés :
Comment implémenter la fonction de directive dans vue
Comment empêcher le rendu répété à l'aide de React
Comment implémenter la fonction de disposition en grille à l'aide de vue
Utilisation associée de js array réduire
Comment utiliser la fonction de remplacement en javascript
Comment utiliser JavaScript pour implémenter la fonction de lecture audio
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Linux afficher les informations du système
Quelle est la différence entre Dubbo et Zookeeper
Algorithme de remplacement de page
Introduction aux commandes de registre Windows couramment utilisées
COMMENT INSTALLER LINUX
Comment obtenir le numéro de série d'un disque dur physique sous Windows
Que dois-je faire si ma licence Windows est sur le point d'expirer ?
Comment vérifier les enregistrements d'appels supprimés
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
