简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

怎樣讓Angular裡的集合資料遍歷顯示

php中世界最好的语言
發布： 2018-04-13 14:06:34
原創
2422 人瀏覽過

這次帶給大家怎樣讓Angular裡的集合資料遍歷顯示，讓Angular裡集合資料遍歷顯示的注意事項有哪些，下面就是實戰案例，一起來看一下。

如下：

<!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>
登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Swiper裡自訂分頁器使用步奏詳解

swiper外掛程式怎麼切換箭頭按鈕

以上是怎樣讓Angular裡的集合資料遍歷顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
angular 數據 遍歷
來源：php.cn
上一篇：VSCode怎麼配置React Native開發環境 下一篇：vue.js如何使用mint-ui輪播組件
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
Angular 7 去除 SCSS 中的重複屬性 AngularSASS(.scss)剝離屬性。如何防止這種情況發生，以便我可以嵌入重複的屬性以實現跨瀏覽器相容性？要複製，請建立一個新的Angular7.2專案{"nam...
來自於 2024-04-04 23:28:54
0
1
1382
Angular應用程式中導入Javascript原型建構函式時拋出錯誤 我有一個Angular應用程序，我試圖在其中導入一個具有構造函數的JS檔。但是當我運行該應用程式時，webpack會拋出錯誤。資產中的Javascript檔：TestService...
來自於 2024-04-04 11:36:15
0
1
288
使用 Ajax 產生內容 - 捲動到 Id 不起作用 我根據透過ajax取得的數據產生頁面內容。我遇到的問題是，當我想滾動到某個ID時，滾動要么不會發生，要么滾動到錯誤的位置。我一直在查看SO問答，但沒有找到任何好的解決方案。很多答案...
來自於 2024-04-04 09:29:39
0
1
397
在 Angular 中建立圓形 SVG 溫度拖曳器？ 這是我嘗試在Angular中創建的圓形拇指拖曳器的靜態演示。它使用rinkle-dashoffset="-260"設定將拇指/拖曳器定位在靠近拇指後面的圓形路徑...
來自於 2024-04-03 09:33:29
0
1
376
Angular：了解文字元素顏色的屬性綁定缺乏反應性 下面是我的.ts文件，import{Component}from'@angular/core';@Component({selector:'app-event-binding',t...
來自於 2024-04-01 17:28:52
0
1
358
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！