<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div>1.ng-app:会使<div>中的变量被Angular js 解析
2.ng-init:初始化应用程序数据。 {{ firstName }}是Angular js的数据绑定表达式。
3.ng-model:把元素值(比如输入域的值)绑定到应用程序。
<div ng-app="" ng-init="quantity=4;price=5"> <h2>价格计算器</h2> 数量: <input type="number" ng-model="quantity"> 价格: <input type="number" ng-model="price"> <p><b>总价:</b> {{ quantity * price }}</p> </div>//总价会是20
4.ng-bind:告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
如果给定的变量或表达式修改了,指定替换的 HTML 元素也会修改。
<div ng-app="" ng-init="myText='Hello World!'"> <p ng-bind="myText"></p> </div>//运行结果:'Hello World!'
5.ng-repeat :重复一个 HTML 元素
<div ng-app="" ng-init="names=['1','2','3']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>会遍历显示:1,2,3 6.
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return {restrict : "A", template : "<h1>自定义指令!</h1>" }; }); </script> </body>使用 .directive 函数来添加自定义的指令。在使用它时需要以 - 分割, runoob-directive
通过设置 restrict 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。