<label>
<input type="checkbox" ng-model="mySwitch">是否同意
小希真萌！
</label>
<button ng-disabled="!mySwitch">点我!</button>
<p></p>
②ng-show
默认隐藏 传入true时显示
<label>
<input type="checkbox" ng-model="mySwitch1">是否
显示？
</label>
<button ng-show="mySwitch1">点我!</button>
<p></p>
③ng-hide
默认显示 传入true是隐藏
<label>
<input type="checkbox" ng-model="mySwitch2">是否隐藏？
</label>
<button ng-hide="mySwitch2">点我!</button>
<p></p>
④ng-click
定义了AngularJS中的点击事件。
只能触发绑定在Angular作用域中的属性与方法。
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
<button ng-click="func()">说一下感想吧！</button>
DOM操作附录：
eg:
先导入JS文件angular.js！！！
<script src="https://www.jb51.net/libs/angular.js"></script>
JS代码：
angular.module("app",[]) .controller("ctrl",function($scope,$rootScope){ $scope.count = 10; $scope.func = function(){ alert("小希真萌！"); } })
五、AngularJS中的表单验证
1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息
2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……
3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用<form novalidate></form>属性，禁用H5自带验证功能。
六、AngularJS中的动画
AngularJS中使用动画 ：
提供了动画效果，可以配合 CSS使用。
1、AngularJS 使用动画需要引入angular-animate.js库！
2、如果页面中没有自定义的模块（ng-app），可以直接绑定系统模块ng-app="ngAnimate"；
如果页面中已有自定义模块，可以在自定义模块后注入"ngAnimate"模块。
eg:angular.module("app",["ngAnimate"])
3、当调用相关指令控制元素显示隐藏时，会自动添加对应的class类；
ng-show/ng-hide 会移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其他指令，需要分别设置显示后和隐藏后的class样式；
显示后：.ng-enter-active,.ng-leave{}
隐藏后：.ng-enter,.ng-leave-active{}
七、AngularJS中的路由
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
eg:angular.module("app",["ngRoute"])
3.即将超链接改为路有格式：
eg:<a href="#/page1" >page1</a>
4.在config中，注入$routeProvider，进行路由配置：
$routeProvider
.when('https://www.jb51.net/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{template:'这是page2页面'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'https://www.jb51.net/'});
})
5、在页面的合适位置，添加ng-view，用于承载打开的页面
<div ng-view></div> <ng-view></ng-view>
【路由参数对象中可选属性】
1.tempalte：自定的HTML模板，会加载在ng-view中
2.tempalteUrl:导入外部的HTML模板，为了避免冲突外部的HTML只需要保留body内部的代码即可；
3.redirectTo：重定向于某个页面，一般用于.otherwise()中；
4.controller：在当模板上执行的controller函数，生成新的scope
以上这篇AngularJS实用基础知识_入门必备篇(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: