基本结构:
//html中:
<div ng-app="app"> <div ng-controller="ctrl"> <div></div> </div> </div>
//js中:
angular.module("app", [])
.controller("ctrl", function ($scope) {
})
常用指令:
ng-bind //单向绑定 ng-model //双向绑定 ng-show/ng-hide //显示/隐藏 ng-if //不会创建html元素 ng-submit //表单的提交 ng-disabled //失效 ng-checked //单选,复选框 ng-src //图片地址 ng-href //链接地址 ng-class //class名 ng-selected //下拉列表选中 ng-change //值改变时
1.例如输入框中输入内容,点击提交添加到列表中:
//HTML: <div ng-app="aj" ng-controller="acontroller" > <input ng-model="task" type="text" /> <input ng-click="a()" type="button" value="提交" /> <h4 ng-if="tasks.length>0">列表</h4> <ul style="background-color:aqua;list-style:none;"> <li ng-repeat="item in tasks track by $index">{{item}} <input ng-click="tasks.splice($index,1)" type="button" value="删除" /> </li> </ul> </div> //JS: angular.module("app", []).controller("acontroller", function ($scope) { $scope.task = ""; $scope.tasks = []; $scope.a = function () { $scope.tasks.push($scope.task); $scope.task = ""; } });
2.几种数据绑定的方式:
<input type="text" ng-model="uname" /> <h1 >{{uname}}</h1> <div ng-bind="uname"></div>
3.登录界面:
HTML: <div ng-app="aj" ng-controller="log"> <input type="text" ng-model="user.name"/> <input type="text" ng-model="user.pwd"/> <input type="button" value="登录" ng-click="login()" /> <h2 ng-show="err.length>0" >{{err}}</h2> </div> JS: angular.module('aj', []) .controller('log', function ($scope) { $scope.err = ""; $scope.user = { name: '', pwd: '' }; $scope.login = function () { if ($scope.user.name == "admin" && $scope.user.pwd == "123") alert("登陆成功!"); else $scope.err = "用户名或密码错误!"; } })
4.页面刷新时防止出现符号:
标签内加入:ng-cloak css中: [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak.x-ng-cloak { display: none !important; }