AngularJS 控制器(待补充)
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
举个例子吧,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<span style="white-space:pre"> </span><p>{{page}}</p>
<div ng-controller="personCtrl">
<br>
Hello {{name}}
<span style="white-space:pre"> </span><button ng-click="click()">click</button>
</div>
{{names}}
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope,$rootScope, $location, $http) {
<span style="white-space:pre"> </span>//对作用域内的name进行控制
$scope.name = "zengxl";
//对作用域内的click进行控制
$scope.click = function() {
$scope.name = "xxx";
}
//对根作用域的
$rootScope.page= "HELLO";
//修改当前网站的url(只是改变url的值,但是不会跳转到url对应的界面)
$location.url('/hello');
//发送http请求
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {
$rootScope.names = response.records;
});
});
</script>
</body>
</html>
ng-controller="personCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
personCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据:
过滤器 | 描述 |
---|---|
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
具体用法是把一个管道字符(|)和一个过滤器添加到表达式中,
如:{{ lastName | lowercase }}
还可以向指令添加过滤器
如:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
此外,过滤器还可以过滤输入:
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
另外,过滤器还可以与service一起使用:
在script中用定义两个service:
app.service('func1', function() {
this.myFunc = function (x) {
return x;
}
});
app.service('func2', function() {
var num=1;
this.myFunc = function (x) {
return num++;
}
});
然后使用过滤器来调度这两个service,这里需要注意的是,func1和func2的顺序要对应好:
app.filter('myFormat',['func1','func2', function(func1,func2) {
return function(x) {
return func1.myFunc(x)+func2.myFunc(x);
};
}]);
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.service('func1', function() {
this.myFunc = function (x) {
return x;
}
});
app.service('func2', function() {
var num=1;
this.myFunc = function (x) {
return num++;
}
});
app.filter('myFormat',['func1','func2', function(func1,func2) {
return function(x) {
return func1.myFunc(x)+func2.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = ['first:','second:','third:'];
});
</script>
</body>
</html>
运行效果:
- first:1
- second:2
- third:3