FED实验室 - 专注WEB端开发和用户体验

NGJS-2 绑定(Binding)

AngularJS教程 煦涵 2515℃ 0评论

首先通过一个实例来开始绑定(Binding)介绍,给一个div元素添加ng-app属性:

<div ng-app="">

</div>
<script type="text/javascript" src="../public/lib/angular-1.3.4/angular.js"></script>

ng-app属性的意思设置该属性的元素(这里是div)及其内部的元素都属于这个AngularJS应用,一般ng-app指令常设置到Html元素上,这样整个页面就是一个应用了。在AngularJS中,绑定可以通过ng-bing指令和双大括号实现,如下例:

<div ng-app="">
	双大括号:{{"1+1="+(1+1)}}
	<br>
	ng-bind:<span ng-bind="'1+1='+(1+1)"></span>
</div>

那么ng-bind与{{}}有什么区别呢?请大家思考~~~,答案将在下一节揭晓!

下面再来看看模型到视图的绑定:

<div ng-app="">
	<input type="text" ng-model="data.message">
	<span>{{data.message}}</span>
</div>

如果我们把模型数据赋值给一个class属性值,那我们就可以控制一个元素的样式了:

<style type="text/css">
	.dn {
		display: none;
	}
	.hello {
		display: block;
	}
</style>
<div ng-app="">
	<input type="text" ng-model="data.message">
	<span>{{data.message}}</span>
	<div class="dn {{data.message}}">
		{{data.message + ' world'}}
	</div>
</div>

预告:下一节将讨论控制器

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (3)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址