【AngularJS】購物車例項
阿新 • • 發佈：2019-01-28
<html ng-app> <head> <title>My Second Page</title> <script src="angular.js"></script> </head> <body ng-controller='CartController'> <h1>My Second Page</h1> <div ng-repeat=" item in items"> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price |currency}}</span> <span>{{item.price*item.quantity|currency}}</span> <button ng-click="remove($index)">Remove</button> </div> <script> function CartController($scope){ $scope.items=[ {title:'Paint pots',quantity:8,price:3.95}, {title:'Polka dots',quantity:17,price:12.95}, {title:'Pebbles',quantity:5,price:6.95} ]; $scope.remove=function(index){ $scope.items.splice(index,1); } } </script> </body> </html>
從上到下：
ng-app：表示AngularJS的作用域，也可以寫在<div>中
ng-controller: 表示控制器，專案中習慣控制器是一個javascript類
ng-repeat: 表示對陣列中的每個物件，都把div中的dom結構複製一份
ng-model: 資料模型
{{}}：資料進行繫結，確保能夠同步更新
