AngularJS入門-demo
阿新 • • 發佈：2018-11-24
雙向繫結測試：
<body ng-app> 請輸入姓名：<input ng-model="myname"> <br> {{myname}},你好 </body>
這時候AngularJS會自動繫結物件myname，並且在下放的{{myname}}中顯示出來
初始化指令：
通過ng-init來初始化物件，使物件有預設的數值：
<body ng-app ng-init="myname='陳大海'"> 請輸入你的姓名：<input ng-model="myname"> <br> {{myname}},你好 </body>
此時預設顯示出來的內容：
陳大海，你好
控制器：
<script >
//定義一個物件函式 var app =angular.module('myApp',[]);
//定義物件的controller，叫做myController，後方就是controller的內容 app.controller('myController',function($scope){ $scope.add=function(){return parseInt($scope.x)+parseInt($scope.y) } }); </script>
呼叫
<body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > 運算結果：{{add()}} </body>
也可以用$scope.x=10，設定x預設值為10
事件指令：
<head> <title> demo </title> <script src="angular.min.js"></script> <script > var app =angular.module('myApp',[]); app.controller('myController',function($scope){ $scope.x=10; $scope.add=function(){ $scope.z=parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > <button ng-click="add()">運算</button> 運算結果：{{z}} </body>
建立$scope.z物件和函式，但是並不主動呼叫函式，當按下ng-click的時候，進行add()的呼叫，然後主動回顯結果
迴圈：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("myController", function($scope) { $scope.list = [10,20,30,40] }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body
先用$scope建立一個list
在用ng-repeat命令呼叫該list
迴圈陣列：
app.controller("myController", function($scope) { $scope.list= [ {name:'張三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56} ]; }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>數學</td> <td>語文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table>
類似類的呼叫。
內建服務：$http
<script> var app = angular.module("myApp",[]); app.controller("myController",function($scope,$http){ $scope.findAll=function(){ $http.get("data.json").success( function(response){ $scope.list=response; } ); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>數學</td> <td>語文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table>
data.json
[
{"name":"張三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"趙六","shuxue":67,"yuwen":86}
]