AngularJS简单例子

双大括号标记{{}}绑定的表达式

<html ng-app>

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

Hello {{'World'}}!

结果:结果直接输出World

AngularJS双向数据绑定

<!doctype html>

<html ng-app>

<head>

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

</head>

<body>

Your name: <input type="text" ng-model="yourname" placeholder="World">

<hr>

Hello {{yourname || 'World'}}!

</body>

</html>

{{yourname || 'World'}}!中的yourname将根据ng-model的值动态的改变,如果ng-model为空,则仅仅输出World

语法或指令

Ng-Bing, ng-init

<body ng-app>

<b ng-init="name='crd'"></b>

<div ng-bind="name">dsdfdsf</div>

</body>

Div的值将输出crd 原值dsdfdsf被覆盖

HTML5 允许扩展的(自制的)属性,以 data- 开头。

AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5:

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

结果值同上

上一篇:iOS开发资源整理【01】


下一篇:[LeetCode] Path Sum IV 二叉树的路径和之四