AngularJs学习笔记（三）控制器和过滤器

最新推荐文章于 2024-04-23 20:32:46 发布

zengxl__

最新推荐文章于 2024-04-23 20:32:46 发布

阅读量1k

点赞数

分类专栏： AngularJs 文章标签： AngularJs 学习

本文链接：https://blog.csdn.net/zengiscoding/article/details/51500544

版权

AngularJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

运行效果：