快捷導(dǎo)航

AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例

更新時(shí)間：2017年12月27日 08:44:54 作者：你我他學(xué)習(xí)吧

下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>AngularJS集合數(shù)據(jù)遍歷顯示</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>序號(hào)</td>
    <td>商品編號(hào)</td>
    <td>商品名稱</td>
    <td>價(jià)格</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:'數(shù)碼相機(jī)',
     price:5000
    },
    {
     id:1002,
     name:'華為手機(jī)',
     price:4000
    }
   ];
  }])
 </script>
</html>

您可能感興趣的文章:

相關(guān)文章

Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證
這篇文章主要介紹了Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證，ng-messages提供了更方便的表單數(shù)據(jù)驗(yàn)證服務(wù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
angular *Ngif else用法詳解
這篇文章主要介紹了angular *Ngif else用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
angularJS開(kāi)發(fā)注意事項(xiàng)
本篇文章給大家分享了angularJS開(kāi)發(fā)注意事項(xiàng)以及相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友參考學(xué)習(xí)下。
2018-05-05
如何用angularjs制作一個(gè)完整的表格
本文給大家分享的是使用angularjs制作一個(gè)完整的表格的真實(shí)案例，結(jié)合前幾篇的內(nèi)容，把整個(gè)完整的代碼分享給大家，有需要的小伙伴可以參考下
2016-01-01
angularjs $http實(shí)現(xiàn)form表單提交示例
這篇文章主要介紹了angularjs $http實(shí)現(xiàn)form表單提交示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-06-06
AngularJS入門教程之雙向綁定詳解
本文主要介紹AngularJS 雙向綁定，這里整理了詳細(xì)的知識(shí)資料并講解，而且附有代碼示例，有興趣的小伙伴可以參考下
2016-08-08
AngularJS基礎(chǔ) ng-repeat 指令簡(jiǎn)單示例
本文主要講解AngularJS ng-repeat 指令,這里對(duì)ng-repeat的基礎(chǔ)資料做了整理，并附有示例代碼，有興趣的朋友可以參考下
2016-08-08
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
angular中實(shí)現(xiàn)li或者某個(gè)元素點(diǎn)擊變色的兩種方法
本篇文章主要介紹了angular中實(shí)現(xiàn)li或者某個(gè)元素點(diǎn)擊變色的兩種方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-07-07