Angular的先决条件
- 在head标签中引入angular.min.js文件
Angular的初步使用
- 在body标签中添加ng-app
- angularJS中表达式的形式是一对嵌套的大括号{ {表达式的内容}}
Angular的双向绑定
-
在保证配置完成之后在进行双向绑定
-
Angular的双向绑定的使用是通过ng-model实现的
-
举例input
-
用户名：<input ng-model="username" /><br> 密码：<input ng-model="password" type="password" /><br> //下方的username和password会实时的根据input中输入进行更新 { {username}}-{ {password}}
-
-
Angular的初始化
-
在body标签中使用ng-init进行初始化，可以对页面刚开始呈现时所需要显示的字段进行编辑
-
举例input
-
<body ng-app ng-init="username='张三'"> //在页面刚开始显示时用户名的值为张三 用户名：<input ng-model="username" /><br> 密码：<input ng-model="password" type="password" /><br> { {username}}-{ {password}} </body>
-
Angular控制器和点击事件
-
在单击事件中绑定方法，并在控制器中定义方法
-
举例两数之和
-
<body ng-app="myApp" <--myApp对应的是script中angular.module定义的myApp--> ng-controller="myController" <--myController对应的是script中的myController-->> num1<input ng-model="x" /> + num2<input ng-model="y" /> <button ng-click="add()"<--绑定事件-->>=</button>{ {z}} </body> <script> var app = angular.module("myApp", []); app.controller("myController", function ($scope) { $scope.add = function () { //在控制器中定义方法 $scope.z = parseInt($scope.x) + parseInt($scope.y); } }) </script>
-
Angular循环遍历指令
-
在控制器中创建需要遍历的集合，在body中使用ng-repeat来遍历list集合
-
ng-repeat=“变量 in 集合名称”(集合名称不一定非要是list)
-
举例遍历名称
-
<body ng-app="myApp" ng-controller
-
最低0.47元/天 解锁文章
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
