angularjs入门范例Word格式文档下载.docx
- 文档编号:13881134
- 上传时间:2022-10-14
- 格式:DOCX
- 页数:60
- 大小:272.45KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- angularjs 入门 范例