AngularJS：ng表达式、ng-init作用、ng数据模型、数据遍历、ng-repeat作用

最新推荐文章于 2020-05-29 19:24:04 发布
最新推荐文章于 2020-05-29 19:24:04 发布
阅读量674 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： AngularJS 文章标签： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/98592126
本文详细介绍了AngularJS中的表达式使用方法，包括基本的{{表达式}

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

ng表达式:

1.{{表达式}}

<div class="well">{{val1*val2}}</div>

2.{{$tot}}

1)视图

<div class="well">{{tot()}}</div>

2)控制器

app.controller('myctl',function($scope){
	//控制器代码逻辑范围
	$scope.tot=function(){
		str=parseInt($scope.val1)+parseInt($scope.val2);

		return str?str:0;
	}	
});

ng视图中的表达式----加法

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<form action="">
			<div class="form-group">
				<label for="">第1个值:</label>
				<input type="text" class="form-control" ng-model='val1'>	
			</div>
			<div class="form-group">
				<label for="">第2个值:</label>
				<input type="text" class="form-control" ng-model='val2'>	
			</div>
			<div class="well">{{tot()}}</div>
		</form>
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	//控制器代码逻辑范围
	$scope.tot=function(){
		str=parseInt($scope.val1)+parseInt($scope.val2);

		return str?str:0;
	}	
});
</script>
</html>

ng-init作用:


<body ng-app='myapp' ng-controller='myctl' ng-init='val1=1;val2=2'></body>

ng-init模型初值

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl' ng-init='val1=1;val2=2'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<form action="">
			<div class="form-group">
				<label for="">第1个值:</label>
				<input type="text" class="form-control" ng-model='val1'>	
			</div>
			<div class="form-group">
				<label for="">第2个值:</label>
				<input type="text" class="form-control" ng-model='val2'>	
			</div>
			<div class="well">{{tot()}}</div>
		</form>
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){

	$scope.tot=function(){
		str=parseInt($scope.val1)+parseInt($scope.val2);

		return str?str:0;
	}	
});
</script>
</html>

ng数据模型:

1)数组
$scope.users=['user1','user2','user3'];

2)json
$scope.json={'name':'user1','age':'20'};

模型数据为数组

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<form action="">
			<div class="form-group">
				<label for="">第1个值:</label>
				<input type="text" class="form-control" ng-model='val1'>	
			</div>
			<div class="form-group">
				<label for="">第2个值:</label>
				<input type="text" class="form-control" ng-model='val2'>	
			</div>
			<div class="well">{{users[0]}}</div>
		</form>
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.users=['user1','user2','user3'];

	$scope.tot=function(){
		str=parseInt($scope.val1)+parseInt($scope.val2);

		return str?str:0;
	}	
});
</script>
</html>

数据遍历*

1)controller
$scope.users=[
	{'id':'1','name':'user1','pass':'123'},
	{'id':'2','name':'user2','pass':'123'},
	{'id':'3','name':'user3','pass':'123'},
	{'id':'4','name':'user4','pass':'123'},
	{'id':'5','name':'user5','pass':'123'},
	{'id':'6','name':'user6','pass':'123'},
	{'id':'7','name':'user7','pass':'123'},
	{'id':'8','name':'user8','pass':'123'},
	{'id':'9','name':'user9','pass':'123'},
	{'id':'10','name':'user10','pass':'123'}
];

2)view
<tr ng-repeat='user in users'>
	<td>{{user.id}}</td>
	<td>{{user.name}}</td>
	<td>{{user.pass}}</td>
	<td><a href="">删除</a></td>
</tr>

3)view
<a href="" class="list-group-item" ng-repeat='user in users'>{{user.name}}</a>



<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<table class='table table-bordered table-hover'>
			<tr>
				<th>id</th>
				<th>username</th>
				<th>password</th>
				<th>delete</th>
			</tr>	
			<tr ng-repeat='user in users'>
				<td>{{user.id}}</td>
				<td>{{user.name}}</td>
				<td>{{user.pass}}</td>
				<td><a href="">删除</a></td>
			</tr>
		</table>	
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.users=[
		{'id':'1','name':'user1','pass':'123'},
		{'id':'2','name':'user2','pass':'123'},
		{'id':'3','name':'user3','pass':'123'},
		{'id':'4','name':'user4','pass':'123'},
		{'id':'5','name':'user5','pass':'123'},
		{'id':'6','name':'user6','pass':'123'},
		{'id':'7','name':'user7','pass':'123'},
		{'id':'8','name':'user8','pass':'123'},
		{'id':'9','name':'user9','pass':'123'},
		{'id':'10','name':'user10','pass':'123'}
	];

});
</script>
</html>

ng-repeat作用

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<div class="list-group">
			<a href="" class="list-group-item active" ng-repeat='user in users'>{{user.name}}</a>
			<a href="" class="list-group-item" ng-repeat='user in users2'>{{user.name}}</a>
		</div>
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.users=[
		{'id':'1','name':'user1','pass':'123'},
		{'id':'2','name':'user2','pass':'123'},
		{'id':'3','name':'user3','pass':'123'},
		{'id':'4','name':'user4','pass':'123'},
		{'id':'5','name':'user5','pass':'123'},
		{'id':'6','name':'user6','pass':'123'},
		{'id':'7','name':'user7','pass':'123'},
		{'id':'8','name':'user8','pass':'123'},
		{'id':'9','name':'user9','pass':'123'},
		{'id':'10','name':'user10','pass':'123'}
	];

	$scope.users2=$scope.users.splice(1);
});
</script>
</html>
AngularJs ng-repeat 嵌套如何获取外层$index
10-21
在AngularJS中，`ng-repeat`指令用于迭代一个数组或对象集合，并在DOM中重复生成元素。当`ng-repeat`嵌套使用时，即在一个`ng-repeat`内部再使用另一个`ng-repeat`，我们可能会遇到需要访问外层循环变量的需求，比如...
AngularJS使用ng-repeat指令实现下拉框
10-21
AngularJS 提供了其他与 `ng-repeat` 相关的指令，如 `ng-init`、`ng-model`、`ng-change` 等，可以进一步增强下拉框的功能。例如，`ng-model` 用于绑定选中项的值，`ng-change` 在值改变时触发回调函数。 总之，`...
AngularJS1 -- ng-init
住在地球的攻城狮
08-21 444
ng-init指令初始化应用程序数据。 ng-init指令执行给定的表达式。 ng-init指令添加一些不必要的逻辑到 scope 中，建议你可以在控制器中ng-controller指令执行它 。 语法 <element ng-init="expression"></element> 所有的 HTML 元素都支持该指令。 expression ...
angular的ng-init指令
lixiaoyan_star的博客
05-07 908
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></scri...
angularjs伴随ng-init等指令产生的作用域
我要上天一起吗？的博客
05-29 686
前两天想用ng-init做条件判断的桥梁时出现了一次失败，做了一个测试，发现angular的局部作用域影响ng-init定义的值。 ng-init的作用就是创建一个变量(bb) 一般情况下，和$scope.bb的作用一样，不同的是，ngInit是指令，有局部作用域，优先级更高。 可以理解为在ngInit的作用域 $ngInitScope内又定义了一个 $ngInitScope.bb = $ngInitScope.website1，而且是双向绑定 <div ng-init="bb=website1".
（四上）Angular指令，ng-bind指令，ng-init 指令，ng-click指令，ng-repeat 指令
action_xing的博客
09-05 867
AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集 在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作 HTM
angularJs中ng-init,ng-trim及表单value与$scope数据提交差异分析
泠泠似水
05-28 4407
1.ng-init:数据初始化，例：ng-init="name='百度'"，初始化name值为“百度”，不过大部分还是使用$scope2.ng-trim:只影响ng中$scope，去除输入时的空格，一般和ng-module在一起，ng-trim默认为true，有ng-module的时候可以省略不写3.在表单中输入数据的时候，先是改变表单value的值，value中不去除空格，需要将数据通过$scop
AngularJS 0002：表达式
11-24
这些表达式会直接与AngularJS的Model进行交互，使得视图能够实时反映模型的变化。 ### 2. 表达式的位置 - 视图（View）：在HTML元素的属性或文本内容中，如`<div>{{expression}}</div>`或`<span ng-bind=...
ng-repeat demo
12-13
在“ng-repeat demo”中，可能会展示如何使用`ng-repeat`与AngularJS的其他特性，如`ng-if`、`ng-switch`、`ng-init`等结合使用，以及如何处理嵌套循环和过滤数据。此外，可能还会涉及到`track by`关键字，它用于...
AngularJS遍历获取数组元素的方法示例
10-19
总结以上，本篇文章主要讲解了在AngularJS中如何使用`ng-repeat`来遍历数组，并通过`ng-init`来初始化数组数据，以及如何在视图中显示数组元素。通过这些基础知识，开发者可以创建动态数据驱动的Web应用，并逐步深入...
ng-init
光英的记忆博客
04-10 1436
ng-init指令用来在指令被调用时设置内部作用域的初始状态。  ng-init最常见的使用场景是:在类似本节的例子中那样,需要创建小的示例代码的时候。对于任何需要健壮结构的场景,请在控制器中用数据模型对象来设置状态。 2{{greeting}} {{person}}
angular ngOnInit 与constructor
Future1994的博客
01-14 567
先父组件的constructor （构造）,之后子组件构造（constructor），之后 父组件初始化 ngOnInit，最后子组件初始化ngOnit。 以上结论 通过控制台得到结论。
ng支持哪些类型的表达式
mutourenoo的专栏
12-30 158
数学运算: + - / * % 比较运算: === , !=, >,=,
AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model
Paul_Huang的Footprint
05-08 3580
AngularJS的绑定： 除了用{{ }}进行绑定外，还可以使用ng-bind,比如： <script src="bower_components/angular/angular.js"> 欢迎来到 HBR {{helloTo.title}} 的世界! 输入您的名字: Hello ! angular.
ng-repeat使用方法
princekin_wdk的博客
03-29 4057
最简单形式ng-repeat="item in arr" 有时候，我们会遇到数组里有重复元素的情况，这时候，ng-repeat代码不能起作用，原因是Angular默认需要在数组中使用唯一索引，那假如我们的数据确实如此，怎么办呢？可以指定它使用序号作索引，就像这样：ng-repeat="item in arr track by $index" 也可以把多维数组用多层循环的方式迭代出来： $scope.
AngularJS ng 模块
我的目标是CEO，最近小目标是项目架构师！
05-13 805
函数 名称 描述 angular.bootstrap 用于手动加载angularjs模板 angular.copy 复制一个对象或者一个数组 angular.element 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理 angular.equals 比较两个值或者两个对象是不是相等 angular.forEach 循环对obj...
ng——显示数据
qq494891241的博客
06-25 378
&lt;tr ng-repeat="x in shops | filter:{gname:name} | orderBy:price" id="t"&gt;    &lt;td&gt;{{x.gid}}&lt;/td&gt;    &lt;td&gt;{{x.gname}}&lt;/td&gt;    &lt;td&gt;     &lt;input type=&q
Angular 表达式
YYece的博客
10-27 613
和JavaScript表达式的区别 值是根据scope内的 在js中调用未定义的属性会报错，而在angular中只会提示undefined或null 可以使用过滤器 不能使用 条件判断、循环、异常，但是可以使用三元表达式 不能声明函数，如ng-init 不能使用正则表达式，除非使用ng-pattern 不能使用new运算符 不能使用Bitwise、，或者void 具有新的模板表达式运算符，比如|...
深入实践AngularJS：ng表达式的应用实例
weixin_33834910的博客
04-15 128
理解 AngularJS 表达式写在双大括号内：{{ expression }}，将在表达式书写的位置"输出"数据。 与ng-bind指令相同，不同点在于：双大括号在页面刷新时会显示一闪而过，ng-bind则没有 与JavaScript表达式的相似点 可以包含文字、运算符（在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数...
AngularJS 三大核心概念：表达式、指令与过滤器
- `ng-repeat`: 遍历数组并为每个元素创建新的作用域，提供了 `$index`, `$first`, `$last`, `$middle`, `$odd`, 和 `$even` 这些特殊变量。 - `ng-show` 和 `ng-hide`: 基于布尔值决定元素是否显示。 - `ng-class` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值