赞
踩
目录
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
- </head>
- <body>
-
- <div ng-app="">
- <p>名字 : <input type="text" ng-model="name"></p>
- <h1>Hello {{name}}</h1>
- <p ng-bind="name"></p>
- </div>
-
- </body>
- </html>
- <div data-ng-app="" data-ng-init="firstName='John'">
-
- <p>姓名为 <span data-ng-bind="firstName"></span></p>
-
- </div>
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
- <div ng-app="myApp" ng-controller="myCtrl">
-
- 名: <input type="text" ng-model="firstName"><br>
- 姓: <input type="text" ng-model="lastName"><br>
- <br>
- 姓名: {{firstName + " " + lastName}}
-
- </div>
-
- <script>
- var app = angular.module('myApp', []);
- app.controller('myCtrl', function($scope) {
- $scope.firstName= "John";
- $scope.lastName= "Doe";
- });
- </script>
ng-repeat 指令会重复一个 HTML 元素:
- <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
- <p>使用 ng-repeat 来循环数组</p>
- <ul>
- <li ng-repeat="x in names">
- {{ x }}
- </li>
- </ul>
- </div>
-
- <div ng-app="" ng-init="names=[
- {name:'Jani',country:'Norway'},
- {name:'Hege',country:'Sweden'},
- {name:'Kai',country:'Denmark'}]">
-
- <p>循环对象:</p>
- <ul>
- <li ng-repeat="x in names">
- {{ x.name + ', ' + x.country }}
- </li>
- </ul>
-
- </div>
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
- <body ng-app="myApp">
-
- <runoob-directive></runoob-directive>
- <div runoob-directive></div>
- <div class="runoob-directive"></div>
- <!-- directive: runoob-directive -->
-
- <script>
- var app = angular.module("myApp", []);
- app.directive("runoobDirective", function() {
- return {
- restrict 值可以是以下几种:
-
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
- restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
- restrict : "A",
- template : "<h1>自定义指令!</h1>"
- };
- });
- </script>
-
- </body>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。