AngularJS入門(用ng-repeat指令實現(xiàn)循環(huán)輸出
循環(huán)輸出列表很多項目在web服務(wù)端做,前端做好模版后后端寫jsp代碼,雙方需要緊密合作,分清責(zé)任。有些項目由后端提供restful方法,前端用ajax調(diào)用自己循環(huán),這種一般是大把的jquery拼字符串,太不直觀,有人搞出了js模板,也沒好到哪里去。
用AngularJS就爽多了,語法和JSP類似:
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body> <table ng-controller="CartController"> <caption>我的購物車</caption> <tr> <th>序號</th> <th>商品</th> <th>單價</th> <th>數(shù)量</th> <th>金額</th> <th>操作</th> </tr> <tr ng-repeat="item in items"> <td>{{$index + 1}}</td> <td>{{item.name}}</td> <td>{{item.price | currency}}</td> <td><input ng-model="item.quantity"></td> <td>{{item.quantity * item.price | currency}}</td> <td> <button ng-click="remove($index)">Remove</button> </td> </tr> </table> <script src="../lib/angularjs/1.2.26/angular.min.js"></script> <script> function CartController($scope) { $scope.items = [ {name: "雷柏(Rapoo) V500 機械游戲鍵盤 機械黃軸", quantity: 1, price: 199.00}, {name: "雷柏(Rapoo) V20 光學(xué)游戲鼠標 黑色烈焰版", quantity: 1, price: 139.00}, {name: "AngularJS權(quán)威教程", quantity: 2, price: 84.20} ]; $scope.remove = function (index) { $scope.items.splice(index, 1); } } </script> </body> </html>
ng-repeat指令生命在需要循環(huán)內(nèi)容的元素上,items和控制器上的變量名對應(yīng),item是為數(shù)組中單個對象起的別名。$index可以返回當前引用對象的序號,從0開始,另外還有$first、$middle、$last可以返回布爾值,用于告訴你當前元素是否是集合中的第一個中間的最后一個元素。
相關(guān)文章
angular8.5集成TinyMce5的使用和詳細配置(推薦)
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細配置,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11AngularJS實現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)的2048小游戲,可實現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動進行游戲的功能,涉及AngularJS頁面元素動態(tài)操作及數(shù)值運算等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01angularjs 中$apply,$digest,$watch詳解
這篇文章主要介紹了angularjs 中$apply,$digest,$watch詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10詳解JavaScript的AngularJS框架中的表達式與指令
這篇文章主要介紹了JavaScript的AngularJS框架中的表達式與指令,文中羅列了幾個常用的指令屬性加以說明,需要的朋友可以參考下2016-03-03Angular應(yīng)用打包和部署實現(xiàn)過程詳解
這篇文章主要為大家介紹了Angular應(yīng)用打包和部署實現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10AngularJS標簽頁tab選項卡切換功能經(jīng)典實例詳解
這篇文章主要介紹了AngularJS實現(xiàn)標簽頁tab選項卡功能,結(jié)合實例形式總結(jié)分析了各種常用的tab選項卡切換操作實現(xiàn)技巧與相關(guān)操作注意事項,需要的朋友可以參考下2018-05-05