学习AngularJS
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8"/>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
</style>
</head>
<body>
<form ng-app="testApp" name="myForm" ng-controller="myCtrl">
姓: <input type="text" ng-model="lastName"><br>
</form>
<script>
var app = angular.module('testApp',[]);
app.controller('myCtrl'.function($scope){
$scope.lastName="测试姓名";
});
</script>
</body>
</HTML>
过滤器
- currency 格式化数字为货币格式。
- filter 从数组项中选择一个子集。
- lowercase 格式化字符串为小写。
- orderBy 根据某个表达式排列数组。
- uppercase 格式化字符串为大写。
服务
$location
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
$http
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
$timeout
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
$interval
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
布局
select下拉选择
<select ng-model="selectedName" ng-options="x for x in names">
</select>
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
table
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.name }}</td>
<td>{{ x.code}}</td>
</tr>
</table>