<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> input.ng-invalid { background-color: lightblue; } </style> </head> <body ng-app="myApp"> <div> <!--ng-app指令告诉Angular应该管理页面中的哪一块,在整个页面中只能有一个 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind指令把应用程序数据绑定到 HTML 视图。--> <p>名字：</p><input type="text" ng-model="name" /> <p ng-bind="name"></p><!--当angular未加载完时不会显示--> <p>{{name}}</p><!--当angular未加载完时会显示--> <p>p>{{1+1}}</</p> <!--在{{}}里面计算--> <!--ng-init指令初始化AngularJs应用程序变量,多个变量以“;”隔开--> <p ng-init="firstName='Jack';lastName='han'"> 姓名:{{firstName}} {{lastName}} </p> <!--HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。--> <p data-ng-init="firstName='Jack'"> 姓名:<span data-ng-bind="firstName"></span> </p> </div> <div> <!--AngularJS 模块（Module） 定义了 AngularJS 应用。 AngularJS 控制器（Controller） 用于控制 AngularJS 应用。 ng-app指令定义了应用, ng-controller 定义了控制器。--> <div ng-controller="myController"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <!--AngularJS 对象就像 JavaScript 对象--> <div ng-init="person={firstName:'Jack',lastName:'han'}"> <p>姓名:{{person.firstName}} {{person.lastName}}</p> </div> </div> <div> <!--ng-repeat 指令会重复一个 HTML 元素：--> <div ng-init="names=['Jack','Peter','Lily']"> <ul> <li ng-repeat="name in names"> {{name}} </li> </ul> </div> <!--ng-repeat 指令用在一个对象数组上：--> <div ng-init="persons=[{name:'Jack',age:18},{name:'Peter',age:19},{name:'Lily',age:15}]"> <ul> <li ng-repeat="person in persons"> {{person.name+","+person.age}} </li> </ul> </div> <!-- 指令: my-directive --> <!--创建自定义的指令--> <!--你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令，HTMl 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive: 你可以通过以下方式来调用指令：--> <!--元素名--> <my-directive></my-directive> <!--属性--> <div my-directive></div> <!--推荐使用--> <!--类名--> <div class="my-directive"></div> <!--注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。 注释 注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。 注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。--> </div> <div> <!--验证用户输入--> <form name="myForm" ng-init="myText='aa@qq.com'"> Email: <input type="email" name="myEmail" ng-model="text" /> <span ng-show="myForm.myEmail.$error.email">不是一个合法的邮箱地址</span> <!--应用状态--> <!--ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):--> <input type="email" name="myEmail1" ng-model="myText" required /> <h1>状态</h1> {{myForm.myEmail1.$valid}}(如果输入的值是合法的则为 true) {{myForm.myEmail1.$dirty}}(如果值改变则为 true)。 {{myForm.myEmail1.$touched}}(如果通过触屏点击则为 true) <!--ng-model 指令基于它们的状态为 HTML 元素提供了 CSS样式： input.ng-invalid { background-color: lightblue; } ng-model 指令根据表单域的状态添加/移除以下 CSS样式： ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine 根作用域 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。--> <span>{{rootName}}</span> </form> </div> <div> AngularJS 过滤器 AngularJS 过滤器可用于转换数据： 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。orderBy:'age' 升序 orderBy:'-age' 降序 uppercase 格式化字符串为大写。 <div ng-init="lastName='abcd';firstName='ABCD';price=9.99;persons=[{name:'Jack',age:18},{name:'Peter',age:19},{name:'Lily',age:15}];"> {{lastName | uppercase}} {{firstName | lowercase}} {{price | currency}} <ul> <li ng-repeat="person in persons | orderBy:'-age'"> {{person.name+","+person.age}} </li> </ul> <p> <input type="text" ng-model="search" /> </p> <ul> <li ng-repeat="person in persons | filter:search | orderBy:'-age'"> {{person.name+","+person.age}} </li> </ul> </div> </div> <div> AngularJS $http AngularJS $http 是一个用于读取web服务器上数据的服务。 $http.get(url) 是用于读取服务器数据的函数。 <div ng-controller="myHttpController"> <ul> <li ng-repeat="person in persons"> 序号：{{$index+1}} {{person.name+","+person.sex}} <span ng-if="$odd">偶数</span> <span ng-if="$even">奇数</span> </li> </ul> </div> </div> <div> <div ng-init="enable=true;"> <input type="button" value="点击" ng-disabled="!enable"/> <input type="checkbox" ng-model="enable"/>启用 </div> <div> <p ng-show="true">我是可见的。</p> <p ng-show="false">我是不可见的。</p> <p ng-hide="true">我是不可见的。</p> <p ng-hide="false">我是可见的。</p> </div> </div> <div> <div ng-controller="myFormController"> <form novalidate="" name="myValidForm"> FirstName:<input type="text" ng-model="user.firstName" /> <br/> LastName:<input type="text" ng-model="user.lastName"/><br/> Email:<input type="email" ng-model="user.email"/><br/> <input type="button" ng-click="submit()" value="提交"/> </form> <p>form = {{user}}</p> <p>master ={{master}}</p> </div> </div> <script src="../Scripts/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("myController", function ($scope, $rootScope) { $scope.firstName = "peter"; $scope.lastName = "han"; $rootScope.rootName = "rootName"; }); app.directive("myDirective", function () { return { restrict: "AECM", //你可以限制你的指令只能通过特定的方式来调用。 template: "<h1>我自定义的指令</h1>", replace: true }; }); //通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用: //restrict 值可以是以下几种: //E 只限元素名使用 //A 只限属性使用 //C 只限类名使用 //M 只限注释使用 //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 app.controller("myHttpController", function($scope, $http) { $http.jsonp("http://w3.open.yunshouyi.net/test/index?callback=JSON_CALLBACK").success(function(data) { $scope.persons = data.result; //{result:[{"name":"chopper","sex":"man"},{"name":"jack","sex":"man"}]} console.log($scope.persons); }); }); app.controller("myFormController", function($scope) { $scope.master = { firstName: "John", lastName: "Doe",email:"aa@qq.com" }; $scope.submit = function() { $scope.user = angular.copy($scope.master); }; $scope.submit(); }); </script> </body> </html>