當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS集合数据遍历显示
生活随笔
收集整理的這篇文章主要介紹了
AngularJS集合数据遍历显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
AngularJS集合數據遍歷顯示
<!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>總結
以上是生活随笔為你收集整理的AngularJS集合数据遍历显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AngularJS基于MVC的复杂操作案
- 下一篇： AngularJS路由使用案例