AngularJS
数字
<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： {{ quantity * cost }}</p> </div> <div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： <span ng-bind="quantity * cost"></span></p> </div>
字符串
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： {{ firstName + " " + lastName }}</p> </div> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJS 对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div> <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>
AngularJS 数组
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div> <div ng-app="" ng-init="points=[1,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>
数据绑定
<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div>
循环数组
<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>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script> var app = angular.module("myApp",[]); app.directive("runoobDirective",function() { return { template : "<h1>自定义指令!</h1>" }; }); </script>
</body>
ng-model 指令
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1> </div> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.name = "John Doe"; }); </script>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
状态
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required> <p>编辑邮箱地址，查看状态的改变。</p> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p> <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p> </form>
输入 变化
<style> input.ng-invalid { background-color: #ccc; } </style>
</head>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>
scope
<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>点我</button> </div> <script> var app = angular.module('myApp',function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; }); </script>
rootScope
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li> </ul> </div> <script> var app = angular.module('myApp',function($scope,$rootScope) { $scope.names = ["Emil","Tobias","Linus"]; $rootScope.lastname = "Refsnes"; }); </script>
<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div> <script> var app = angular.module('myApp',[]); app.controller('personCtrl',function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
外部控制器文件
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
personController.js
angular.module('myApp',[]).controller('namesCtrl',function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}
];
});
过滤器
<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> <p>姓名为 {{ lastName | lowercase }}</p> <input type="number" ng-model="quantity"> <input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> </div>
过滤循环
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ',' + x.country }} </li> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ',' + x.country }} </li> </ul> </div>
<div ng-app="myApp" ng-controller="myCtrl"> 姓名: {{ msg | reverse }} </div> <script> var app = angular.module('myApp',function($scope) { $scope.msg = "Runoob"; }); app.filter('reverse',function() { return function(text) { return text.split("").reverse().join(""); } }); </script>
$location
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location) {
$scope.myUrl = $location.absUrl();
});
$http
var app = angular.module('myApp',[]);
app.controller('myCtrl',$http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
$http.get('/someUrl',config).then(successCallback,errorCallback);
$http.post('/someUrl',data,errorCallback);
var app = angular.module('myApp',[]);
app.controller('siteCtrl',$http) {
$http({
method: 'GET',url: 'https://www.runoob.com/try/angularjs/data/sites.PHP'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
},function errorCallback(response) {
});
});
$timeout
var app = angular.module('myApp',$timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
},2000);
});
$interval
var app = angular.module('myApp',$interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},1000);
});
app.service('hexafy',function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl',hexafy) {
$scope.hex = hexafy.myFunc(255);
});
app.filter('myFormat',['hexafy',function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
select
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite" ng-options="x.site for x in sites"></select> <h1>你选择的是: {{selectedSite.site}}</h1> <p>网址为: {{selectedSite.url}}</p> </div> <script> var app = angular.module('myApp',function($scope) { $scope.sites = [ {site : "Google",url : "http://www.google.com"},{site : "Runoob",url : "http://www.runoob.com"},{site : "Taobao",url : "http://www.taobao.com"} ]; }); </script>
select repeat
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select> <h1>你选择的是: {{selectedSite}}</h1> </div> <script> var app = angular.module('myApp',url : "http://www.taobao.com"} ]; }); </script>
表格
<div ng-app="myApp" ng-controller="customersCtrl"> <table style="border:1px solid red"> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp',[]); app.controller('customersCtrl',$http) { $http.get("/try/angularjs/data/Customers_JSON.PHP") .then(function (result) { $scope.names = result.data.records; }); }); </script>
orderBy uppercase
index
odd $even
<table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> <td>{{ x.Country | uppercase }}</td> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td> <td ng-if="$even">{{ x.Name }}</td> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td> <td ng-if="$even">{{ x.Country }}</td> </tr> </table>
ng-disabled
<div ng-app="" ng-init="mySwitch=true"> <p> <button ng-disabled="mySwitch">点我!</button> </p> <p> <input type="checkBox" ng-model="mySwitch"/>按钮 </p> <p> {{ mySwitch }} </p> </div>
show
<div ng-app="" ng-init="hour=13">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<p ng-show="hour > 12">我是可见的。</p>
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
ng-click
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我！</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp',function($scope) { $scope.count = 0; }); </script> <form> Check to show a header: <input type="checkBox" ng-model="myVar"> 选择一个选项: <input type="radio" ng-model="myVar" value="dogs">Dogs <input type="radio" ng-model="myVar" value="tuts">Tutorials <input type="radio" ng-model="myVar" value="cars">Cars 选择一个选项: <select ng-model="myVar"> <option value=""> <option value="dogs">Dogs <option value="tuts">Tutorials <option value="cars">Cars </select> </form> <h1 ng-show="myVar">My Header</h1> <div ng-switch="myVar"> <div ng-switch-when="dogs"> <h1>Dogs</h1> <p>Welcome to a world of dogs.</p> </div> <div ng-switch-when="tuts"> <h1>Tutorials</h1> <p>Learn from examples.</p> </div> <div ng-switch-when="cars"> <h1>Cars</h1> <p>Read about cars.</p> </div> </div>
表单
<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp',[]); app.controller('formCtrl',function($scope) { $scope.master = {firstName: "John",lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script>
表单验证
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱。</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script> var app = angular.module('myApp',[]); app.controller('validateCtrl',function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; }); </script>
api
<input type="text" ng-model="myInput" ng-blur="blur()"> <p>输入的内容为：{{myInput}}</p> <p>变成小写：{{ x1 }}</p> <p>变成大写：{{ x2 }}</p> <p ng-switch = "x3"> 是不是字符串： <label ng-switch-when = "true">是</label> <label ng-switch-when = "false">不是</label> <label ng-switch-when = ""></label> </p> <p ng-switch = "x4"> 是不是数字： <label ng-switch-when = "true">是</label> <label ng-switch-when = "false">不是</label> <label ng-switch-when = ""></label> </p> </div> angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串，如果是返回 true。 angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。 <script> var app = angular.module('myApp',function($scope) { $scope.blur = function(){ $scope.x1 = angular.lowercase($scope.myInput); $scope.x2 = angular.uppercase($scope.myInput); $scope.x3 = angular.isString($scope.myInput); $scope.x4 = !isNaN($scope.myInput); } }); </script> </body>
与bootstrap整合
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="userCtrl"> <div class="container"> <h3>Users</h3> <table class="table table-striped"> <thead> <tr> <th>编辑</th> <th>名</th> <th>姓</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td> <button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span>编辑 </button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr> </tbody> </table> <hr> <button class="btn btn-success" ng-click="editUser('new')"> <span class="glyphicon glyphicon-user"></span>创建新用户 </button> <hr> <h3 ng-show="edit">创建新用户:</h3> <h3 ng-hide="edit">编辑用户:</h3> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">名:</label> <div class="col-sm-10"> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">姓:</label> <div class="col-sm-10"> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密码:</label> <div class="col-sm-10"> <input type="password" ng-model="passw1" placeholder="密码"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">重复密码:</label> <div class="col-sm-10"> <input type="password" ng-model="passw2" placeholder="重复密码"> </div> </div> </form> <hr> <button class="btn btn-success" ng-disabled="error || incomplete"> <span class="glyphicon glyphicon-save"></span>修改 </button> </div> <script src="myUsers.js"></script>
包含
跨域包含
<div ng-include="'http://c.runoob.com/runoobtest/angular_include.PHP'"></div>
<script> var app = angular.module('myApp',[]) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'http://c.runoob.com/runoobtest/**' ]); }); </script>
动画
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkBox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script> var app = angular.module('myApp',['ngAnimate']); </script>
mainApp.constant("configParam","constant value");
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput",5);
依赖注入factory
<body> <h2>AngularJS 简单应用</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>输入一个数字: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>结果: {{result}}</p> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var mainApp = angular.module("mainApp",[]); mainApp.value("defaultInput",5); mainApp.factory('MathService',function() { var factory = {}; factory.multiply = function(a,b) { return a * b; } return factory; }); mainApp.service('CalcService',function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController',CalcService,defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script>
依赖注入provider
<body> <h2>AngularJS 简单应用</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>输入一个数字: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>结果: {{result}}</p> </div> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <script> var mainApp = angular.module("mainApp",[]); mainApp.config(function($provide) { $provide.provider('MathService',function() { this.$get = function() { var factory = {}; factory.multiply = function(a,b) { return a * b; } return factory; }; }); }); mainApp.value("defaultInput",5); mainApp.service('CalcService',defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script>
路由
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script> angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider',function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]); </script>
$routeProvider.when(url,{
template: string,templateUrl: string,controller: string,function 或 array,controllerAs: string,redirectTo: string,function,resolve: object<key, function>
});
参数说明：
template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
.when('/computers',{template:'这是电脑分类页面'})
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
$routeProvider.when('/computers',{
templateUrl: 'views/computers.html',});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs:
string类型，为controller指定别名。
redirectTo:
重定向的地址。
resolve:
指定当前controller所依赖的其他模块。
路由2
<script type="text/javascript"> angular.module('ngRouteExample',['ngRoute']) .controller('HomeController',function ($scope,$route) { $scope.$route = $route;}) .controller('AboutController',$route) { $scope.$route = $route;}) .config(function ($routeProvider) { $routeProvider. when('/home',{ templateUrl: 'embedded.home.html',controller: 'HomeController' }). when('/about',{ templateUrl: 'embedded.about.html',controller: 'AboutController' }). otherwise({ redirectTo: '/home' }); }); </script>
</head>
<body ng-app="ngRouteExample" class="ng-scope">
<script type="text/ng-template" id="embedded.home.html"> <h1> Home </h1> </script>
<script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> </script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view="">
</div>
</div>
</body>
应用
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字数: <span ng-bind="left()"></span></p>
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
"myNoteApp.js":
var app = angular.module("myNoteApp",[]);
"myNoteCtrl.js":
app.controller("myNoteCtrl",function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved");};
});
指令
@H_691_4502@指令
@H_691_4502@描述
| ng-app 定义应用程序的根元素。 |
|
| ng-bind |
绑定 HTML 元素到应用程序数据 |
| ng-bind-html |
绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符 |
| ng-bind-template |
规定要使用模板替换的文本内容 |
| ng-blur |
规定 blur 事件的行为 |
| ng-change |
规定在内容改变时要执行的表达式 |
| ng-checked |
规定元素是否被选中 |
| ng-class |
指定 HTML 元素使用的 CSS 类 |
| ng-class-even |
类似 ng-class，但只在偶数行起作用 |
| ng-class-odd |
类似 ng-class，但只在奇数行起作用 |
| ng-click |
定义元素被点击时的行为 |
| ng-cloak |
在应用正要加载时防止其闪烁 |
| ng-controller |
定义应用的控制器对象 |
| ng-copy |
规定拷贝事件的行为 |
| ng-csp |
修改内容的安全策略 |
| ng-cut |
规定剪切事件的行为 |
| ng-dblclick |
规定双击事件的行为 |
| ng-disabled |
规定一个元素是否被禁用 |
| ng-focus |
规定聚焦事件的行为 |
| ng-form |
指定 HTML 表单继承控制器表单 |
| ng-hide |
隐藏或显示 HTML 元素 |
| ng-href |
为 the 元素指定链接 |
| ng-if |
如果条件为 false 移除 HTML 元素 |
| ng-include |
在应用中包含 HTML 文件 |
| ng-init |
定义应用的初始化值 |
| ng-jq |
定义应用必须使用到的库，如：jQuery |
| ng-keydown |
规定按下按键事件的行为 |
| ng-keypress |
规定按下按键事件的行为 |
| ng-keyup |
规定松开按键事件的行为 |
| ng-list |
将文本转换为列表 (数组) |
| ng-model |
绑定 HTML 控制器的值到应用数据 |
| ng-model-options |
规定如何更新模型 |
| ng-mousedown |
规定按下鼠标按键时的行为 |
| ng-mouseenter |
规定鼠标指针穿过元素时的行为 |
| ng-mouseleave |
规定鼠标指针离开元素时的行为 |
| ng-mousemove |
规定鼠标指针在指定的元素中移动时的行为 |
| ng-mouSEOver |
规定鼠标指针位于元素上方时的行为 |
| ng-mouseup |
规定当在元素上松开鼠标按钮时的行为 |
| ng-non-bindable |
规定元素或子元素不能绑定数据 |
| ng-open |
指定元素的 open 属性 |
| ng-options |
在 列表中指定 |
| ng-paste |
规定粘贴事件的行为 |
| ng-pluralize |
根据本地化规则显示信息 |
| ng-readonly |
指定元素的 readonly 属性 |
| ng-repeat |
定义集合中每项数据的模板 |
| ng-selected |
指定元素的 selected 属性 |
| ng-show |
显示或隐藏 HTML 元素 |
| ng-src |
指定 元素的 src 属性 |
| ng-srcset |
指定 元素的 srcset 属性 |
| ng-style |
指定元素的 style 属性 |
| ng-submit |
规定 onsubmit 事件发生时执行的表达式 |
| ng-switch |
规定显示或隐藏子元素的条件 |
| ng-transclude |
规定填充的目标位置 |
| ng-value |
规定 input 元素的值 |
AngularJS 事件
AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
AngularJS 验证属性
dirty
invalid
$error
转换
@H_691_4502@API
@H_691_4502@描述
| angular.lowercase() |
将字符串转换为小写 |
| angular.uppercase() |
将字符串转换为大写 |
| angular.copy() |
数组或对象深度拷贝 |
| angular.forEach() |
对象或数组的迭代函数 |
比较
@H_691_4502@API
@H_691_4502@描述
| angular.isArray() |
如果引用的是数组返回 true |
| angular.isDate() |
如果引用的是日期返回 true |
| angular.isDefined() |
如果引用的已定义返回 true |
| angular.isElement() |
如果引用的是 DOM 元素返回 true |
| angular.isFunction() |
如果引用的是函数返回 true |
| angular.isNumber() |
如果引用的是数字返回 true |
| angular.isObject() |
如果引用的是对象返回 true |
| angular.isString() |
如果引用的是字符串返回 true |
| angular.isUndefined() |
如果引用的未定义返回 true |
| angular.equals() |
如果两个对象相等返回 true |
JSON
@H_691_4502@API
@H_691_4502@描述
| angular.fromJson() |
反序列化 JSON 字符串 |
| angular.toJson() |
序列化 JSON 字符串 |
@H_169_
5025@基础
@H_691_4502@API
@H_691_4502@描述
| angular.bootstrap() |
手动启动 AngularJS |
| angular.element() |
包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。 |
| angular.module() |
创建，注册或检索 AngularJS 模块 |
