<%@ 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>angularJs--1入門小例子
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
angularjs前端
1 : html中自定義控件progressBar ，雙向綁定變量。並且使用class中的變量_progressBarWidth <ng-template #audioBar>//自定義控件