1. 程式人生 > >angularJs--1入門小例子

angularJs--1入門小例子

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html ng-app>
<head>
<script type="text/javascript"
src="/angularJs/angular-1.2.19/angular.min.js"></script>
</head>
<body>
<div ng-controller="testCtrl">
<b>小型計算器:</b> <br> <br>
<table>
<tr>
<td>數字1</td>
<td>數字2</td>
</tr>
<tr>
<td><input type="number"
min="0"
max="10"
ng-model="number1"
required></td>
<td><input type="number"
min="2"
max="10"
ng-model="number2"
required></td>
</tr>
</table>
<hr>
<b>Total:</b> {{number1 * number2 | currency}}
</div>
<div ng-controller="registUser">
<b>註冊使用者:</b><br><br>
<table>
<tr>
<td>使用者名稱:</td>
<td><input type="text" ng-model="userName"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" ng-model="password"></td>
</tr>
</table>
</div>
<script>
function testCtrl($scope) {
$scope.number1 = 2;
$scope.number2 = 5.6;
}
function registUser($scope){
$scope.userName = "chenchaoyang";
$scope.password="china";
}
</script>
</body>
</html>