JavaScript应用-Angular.js的使用

最新推荐文章于 2021-03-17 18:16:14 发布

远方©

最新推荐文章于 2021-03-17 18:16:14 发布

阅读量228

点赞数

分类专栏：前端文章标签：学习历程记录

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1、ng-app 表达式

<html>
<head>
	<title>表达式</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app>
	打印结果：{{100+100}}
</body>
</html>

在这里插入图片描述

2.ng-model动态绑定、ng-init初始化指令

<html>
	<head>
		<title>动态绑定，初始化指令</title>
		<script src="angular.min.js"></script>
	</head>
	<body ng-app ng-init="myname='李海'">请输入你的姓名:<input ng-model="myname">
		<br>
		{{myname}},你好！	
	</body>
</html>

在这里插入图片描述

3.ng-controller 控制器

<html>
<head>
	<title>控制器</title>
	<script src="angular.min.js"></script>
	<script>
		//建立模型
		var app = angular.module("myApp",[]);
		//创建控制器  $scope就是控制层之间交换数据的桥梁
		app.controller("myController",function($scope){
			$scope.add=function(){
				return $scope.x+$scope.y;
			}
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	第一个数：<input ng-model="x">
	第二个数：<input ng-model="y">
	{{add()}}
</body>
</html>

在这里插入图片描述

4.ng-click 事件指令 $scope内置服务

<html>
<head>
	<title>事件指令</title>
	<script src="angular.min.js"></script>
	<script>
		//建立模型
		var app = angular.module("myApp",[]);
		//创建控制器  $scope就是控制层之间交换数据的桥梁
		app.controller("myController",function($scope){
			$scope.add=function(){
				$scope.z = parseInt($scope.x)+parseInt($scope.y);
			}
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	第一个数：<input ng-model="x">
	第二个数：<input ng-model="y">
	<button ng-click="add()">运算</button>
	运算结果:{{z}}
</body>
</html>

在这里插入图片描述
5.ng-repeat 循环数组

<html>
<head>
	<title>循环数组  </title>
	<script src="angular.min.js"></script>
	<script>
		//建立模型
		var app = angular.module("myApp",[]);
		//创建控制器  $scope就是控制层之间交换数据的桥梁
		app.controller("myController",function($scope){
			$scope.list=[102,203,349,555];
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	<table>
		<tr ng-repeat="x in list">
			<td>{{x}}</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述
6.循环对象数组

<html>
<head>
	<title>循环对象数组  </title>
	<script src="angular.min.js"></script>
	<script>
		//建立模型
		var app = angular.module("myApp",[]);
		//创建控制器  $scope就是控制层之间交换数据的桥梁
		app.controller("myController",function($scope){
			$scope.list=[
				{name:'张三',shuxue:100,yuwen:100},
				{name:'李四',shuxue:90,yuwen:90},
				{name:'张三',shuxue:40,yuwen:50}
			];
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	<table>
		<tr>
			<td>姓名</td>
			<td>数学</td>
			<td>语文</td>
		</tr>
		<tr ng-repeat="entity in list">
			<td>{{entity.name}}</td>
			<td>{{entity.shuxue}}</td>
			<td>{{entity.yuwen}}</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

7.$http 内置服务

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>内置服务$http</title>
	<script src="angular.min.js"></script>
	<script>
		//建立模型
		var app = angular.module("myApp",[]);
		//创建控制器  $scope就是控制层之间交换数据的桥梁
		app.controller("myController",function($scope,$http){
			$scope.findList=function(){
				$http.get("data.json").success(
				function(response){
					$scope.list=response;
					}
				);
			}
			$scope.findList();
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
	<table>
		<tr>
			<td>姓名</td>
			<td>数学</td>
			<td>语文</td>
		</tr>
		<tr ng-repeat="entity in list">
			<td>{{entity.name}}</td>
			<td>{{entity.shuxue}}</td>
			<td>{{entity.yuwen}}</td>
		</tr>
	</table>
</body>
</html>

8.data.json

[
	{"name":"张三","shuxue":100,"yuwen":100},
	{"name":"李四","shuxue":90,"yuwen":90},
	{"name":"王五","shuxue":40,"yuwen":50},
	{"name":"赵六","shuxue":40,"yuwen":50}
]

在这里插入图片描述

原文：https://blog.csdn.net/mollen/article/details/84727479

远方©

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript应用-Angular.js的使用

1、ng-app 表达式<html><head> <title>表达式</title> <script src="angular.min.js"></script></head><body ng-app> 打印结果：{{100+100}}</body></html&g...
复制链接

扫一扫