AngularJS：ng作用域、ng过滤器、ng服务、

最新推荐文章于 2024-05-30 17:06:00 发布

hahahafree

最新推荐文章于 2024-05-30 17:06:00 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/98598382

AngularJS 专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解AngularJS框架的关键特性，包括作用域管理、内置过滤器如currency、lowercase、filter、orderBy、uppercase的使用，以及服务如$location、$http、$timeout、$interval的应用，还有HTTP AJAX异步通讯的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng作用域:

$scope.username='user456';
$scope.say=function(){
	return 'abc';
}

ng过滤器:

currency 	 #格式化数字为货币格式。
filter 	#从数组项中选择一个子集。
lowercase 	#格式化字符串为小写。
orderBy 	#根据某个表达式排列数组。
uppercase 	#格式化字符串为大写。

currency货币过滤器

<div class="form-group">
			<label for="">用户名:</label>
			<input type="text" class="form-control" ng-model='username'>
</div>
<div class="well">用户名: {{username|currency}}</div>

lowercase转小写过滤器

<div class="form-group">
			<label for="">用户名:</label>
			<input type="text" class="form-control" ng-model='username'>
</div>
<div class="well">用户名: {{username|lowercase}}</div>

filter过滤器

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<div class="form-group">
			<input type="text" class="form-control" ng-model='find'>
		</div>
		<div class="list-group">
			<a href="" class="list-group-item" ng-repeat='row in rows|filter:find'>{{row}}</a>
		</div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.rows=['user1','linux2','php3','java4','user5'];
});
</script>

orderBy过滤器

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<div class="form-group">
			<input type="text" class="form-control" ng-model='find'>
		</div>
		<div class="list-group">
			<a href="" class="list-group-item" ng-repeat='row in rows|filter:find|orderBy:"id"'>{{row.name}}</a>
		</div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.rows=[
		{'name':'user110','id':1},
		{'name':'linux','id':30},
		{'name':'user10','id':2},
		{'name':'phpu2','id':40},
		{'name':'javu30','id':4}
	];
});

</script>

uppercase转大写过滤器

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
		<!-- mvc -->

		<div class="form-group">
			<label for="">用户名:</label>
			<input type="text" class="form-control" ng-model='username'>
		</div>
		<div class="well">用户名: {{username|uppercase}}</div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
});
</script>

ng服务:

1.$location
2.$http
3.$timeout
4.$interval

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<div class="well">url: <span class='label label-success'>{{url}}</span></div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope,$location){
	$scope.url=$location.absUrl();
});

</script>

timeout超时器服务

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<div class="well">url: <span class='label label-success'>{{url}}</span></div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope,$location,$timeout){
	$timeout(function(){
		$scope.url=$location.absUrl();
	},2000);
});

</script>

$interval服务

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<div class="well">url: <span class='label label-success'>{{num}}</span></div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope,$interval){
	$scope.num=0;

	s=0;
	v=1;

	$interval(function(){
		s+=v;
		$scope.num=s;
	},1000);
});

</script>

http ajax异步通讯

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<div class="well">url: <span class='label label-success'>{{num}}</span></div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope,$http){
	$http.get('get.php').success(function(res){
		if(res=='ok'){
			$scope.num='1';
		}else{
			$scope.num='0';
		}
	});
});

</script>

get.php

<?php
echo "ok"
?>

http ajax获取json字符串

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<table class='table table-striped table-bordered table-hover'>
			<tr>
				<th>名称:</th>
				<th>地址:</th>
				<th>国家:</th>
			</tr>	
			<tr ng-repeat='site in sites'>
				<td>{{site.Name}}</td>
				<td>{{site.Url|uppercase}}</td>
				<td>{{site.Country|lowercase}}</td>
			</tr>
		</table>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope,$http){
	$http.get('get.php').success(function(res){
		$scope.sites=res.sites;
	});
});

</script>

get.php

<?php 
$str='{
    "sites": [
        {
            "Name": "菜鸟教程",
            "Url": "www.runoob.com",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}';

echo $str;
 ?>