AngularJS 指令是以 ng 作为前缀的 HTML 属性。【HTML5允许扩展的属性,以data-开头】
ng-app:定义一个AngularJS应用程序
ng-model:把元素值比如输入域的值绑定到应用程序,可将输入域的值与AngularJS创建的变量绑定。
双向绑定:<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
验证用户输入:<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
(提示信息会在ng-show属性返回ture的情况下显示)
ng-model可为应用数据提供状态值(invaild,dirty,touched,error)
也可给予他们的状态为HTML元素提供CSS类。
ng-model 指令根据表单域的状态添加/移除以下类:
ng-bind:把应用程序数据绑定到HTML视图
ng-init:初始化AngularJS应用程序变量
ng-repeat:重复一个HTML元素,经常用于循环访问数组ng-repeat=“x in 数组名”
可以使用.directive函数来添加自定义的指令,使用驼峰法命名,但使用时需要以-分割:
使用下列方式调用:<指令名></指令名>
<div 指令名></div>
<div class="指令名"></div>
<!-- directive:指令名 -->
输出结果相同。但你可以限制你的指令只能通过特定的方式来调用:在指令定义函数的return里加入restrict属性。restrict值可以是(E:元素名;A:属性;C:类名;M:注释)
AngularJS表达式:{{expression}} ,把数据绑定到HTML,与ng-bind有异曲同工之妙。
Scope作用域:应用在HTML和JavaScript之间的纽带
使用:当你在AngularJS创建控制器时,可以将$scope对象当做参数传递
< h1 > {{carname}} < /h1 >
< /div >
< script >
app.controller( 'myCtrl', function($scope) {
$scope.carname = "Volvo";
});
Scope概述:AngularJS应用组成:View视图,即HTML
Model模型,当前视图中可用的数据
Controller控制器,即JS函数,可以添加或修改属性
Scope是模型,是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
Controller控制器:控制器是JS对象,由标准的JS对象的构造函数创建
AngularJS 使用$scope 对象来调用控制器, $scope 是一个应用对象(属于应用变量和函数)。控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
过滤器:过滤器可以使用一个管道字符(|)添加到表达式和指令中。
currency:格式化数字为货币格式
fifter:从数组项中选择一个子集
lowercase:格式化为小写
uppercase:格式化为大写
orderBy:根据某个表达式排列数组