<!-- 通用部分 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
......
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
......
</body>
</html>
控制器
ng-controller 定义应用程序控制器。
ng-controller="xxCtrl" 属性是一个 AngularJS 指令。
xxCtrl 是一个 JavaScript 函数。
$scope 对象来调用控制器。
ng-model 指令绑定控制器创建的属性(firstName 和 lastName)。
<div ng-app="xxApp" ng-controller="xxCtrl">
FN: <input type="text" ng-model="firstName"><br>
LN: <input type="text" ng-model="lastName"><br>
<br>
<!-- 方法一 -->
name:{{firstName + " " + lastName}}
<!-- 方法二 -->
name: {{fullName()}}
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.firstName = "Evan";
$scope.lastName = "Lee";
//方法二
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
输出:
过滤器
( | )字符,多用于表达式和指令中,可格式化数据
1、uppercase / lowercase
<div ng-app="" ng-init="name='Evan Lee'">
<p>{{ name | lowercase }}</p>
<p>{{ name | uppercase }}</p>
</div>
输出:
2、currency 货币格式
<div ng-app="xxApp" ng-controller="xxCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价: {{ (quantity * price) | currency }}</p>
</div>
<script>
angular.module('xxApp', []).controller('xxCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 5.04;
});
</script>
输出:
3、orderBy 排列数组
<div ng-app="" ng-init="names=[{name:'YY',fans:'Bee'},
{name:'FF',fans:'Bee'}]">
<ul>
<li ng-repeat="x in names | orderBy:'name'">
{{ x.name + ', ' + x.fans }}
</li>
</ul>
</div>
输出:
4、filter 从数组中选一个子集
<div ng-app="" ng-init="names=[{name:'YY',fans:'bee'},
{name:'FF',fans:'bee'},
{name:'YF',fans:'Bee'}]">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'name'">
{{ x.name + ', ' + x.fans }}
</li>
</ul>
</div>
输出: