angularjs入门范例Word格式文档下载.docx

angularjs入门范例Word格式文档下载.docx

《angularjs入门范例Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《angularjs入门范例Word格式文档下载.docx（60页珍藏版）》请在冰豆网上搜索。

/title>

scriptsrc="

angular.min.js"

/script>

scriptlanguage="

JavaScript"

--

//定义HTML中ng-controller指定的同名函数

functionSampleController（$scope）{

//借助于参数$scope为页面输出数据

$scope.message='

HelloWorld!

'

;

}

//-->

/head>

body>

--ng-controller指令指定控制器-->

h1ng-controller="

SampleController"

--用{{}}输出容-->

p>

{{message}}

{{5*3}}

/h1>

/body>

/html>

（2）输出数据

输出数据<

$scope.simple='

使用简化写法输出容'

$scope.directive='

使用指令输出容'

divng-controller="

{{simple}}<

/p>

png-bind="

directive"

--

ng-bind和{{}}的区别：

stackoverflow./questions/16125872/why-ng-bind-is-better-than-in-angular

-->

/div>

（3）显示/隐藏

显示/隐藏<

div>

--ng-show的值为true时显示，false时隐藏-->

divng-show="

true"

Visible<

false"

Invisible<

（4）表单校验

表单校验<

formnovalidatename="

myForm"

ng-controller="

inputtype="

text"

name="

id"

ng-model="

user.id"

requiredng-maxlength="

6"

/>

spanng-show="

myForm.id.$error.required"

Required<

/span>

myForm.id.$error.maxlength"

Toolong！

br/>

pass"

user.pass"

requiredng-minlength="

5"

myForm.pass.$error.required"

myForm.pass.$error.minlength"

Tooshort！

/form>

（5）表单

表单<

$scope.text='

TextBox'

$scope.checkbox=true;

$scope.radio='

FUGA'

$scope.select='

foo'

formng-controller="

--ng-model指令用来捆绑$scope和输入项-->

/>

checkbox"

radio"

hoge"

value="

HOGE"

HOGE

FUGA"

FUGA

selectng-model="

select"

optionvalue="

foo"

Foo<

/option>

bar"

Bar<

/select>

--用{{}}实时输出容-->

hr>

你输入了：

{{text}}

（6）事件监听

事件监听<

$scope.click=function（）{

clickbutton!

};

buttonng-click="

click（）"

Button<

/button>

{{message}}<

（7）循环输出

循环输出<

$scope.items=[

{key:

'

hoge'

value:

HOGE'

},

fuga'

piyo'

PIYO'

}

];

ulng-controller="

--ng-repeat指令所在的标签会被循环输出-->

ling-repeat="

iteminitems"

{{item.key}}:

{{item.value}}

/li>

/ul>

（8）循环输出（顺位）

循环输出（顺位）<

--$index标示现在输出的顺位（以0开始）-->

{{$index+1}}{{item.key}}:

（9）循环输出（操作item）

循环输出（操作item）<

$scope.items