AngularJS系列(一)——常用指令
2017-09-08 14:09
627 查看
资料
学习参考:http://www.runoob.com/angularjs/angularjs-tutorial.html概述
AngularJS1.x是基于MVC的js架构。jQuery是dom搜索驱动,AngularJS是数据驱动。对于熟悉jq的同学来说,学习使用Angular就用angular的方式思考实现、即数据的角度。而不用JQ的角度、即操作dom。
引用文件:angular.min.js
常用指令
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
<div ng-app=""> </div>
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
2.1:绑定 HTML 元素到 HTML 表单。
<div ng-app=""ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名: <inputtype="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName}}</p> </div>
2.2:邮箱验证
<form ng-app=""name="myForm"> Email: <input type="email" name="myEmail"ng-model="test" /> <spanng-show="myForm.myEmail.$error.email">不是合法邮箱信息</span> </form>
验证实例
<form ng-app="validationApp"ng-controller="mainController" name="myForm"ng-submit="submitForm(myForm.$valid)" novalidate> <p> <!--必填验证 --> 昵称: <inputtype="text" ng-model="name" required /> </p> <p> <!--输入值最大最小验证 --> 用户名: <inputtype="text" ng-model="user.username"ng-minlength="3" ng-maxlength="8" /> </p> <p> <!--email验证 --> Email: <input type="email"name="myAddress" ng-model="text"> <spanng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </p> <p> <inputtype="submit" class="btn btn-primary"ng-disabled="myForm.$invalid" /> </p> </form>
<scripttype="text/javascript"> varvalidationApp = angular.module('validationApp', []); validationApp.controller('mainController',function($scope) { $scope.submitForm =function(isValid) { if (isValid) { alert('表单验证通过'); } }; }); </script>
2.3:获得状态值(invalid, dirty, touched, error):
<form ng-app=""name="myForm" ng-init="myText = 'marx@foxmail.com'"> Email: <input type="email"name="myAddress" ng-model="myText" required> <p>编辑邮箱地址,查看状态的改变。</p> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}}(如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}}(如果值改变则为 true)。</p> <p>Touched:{{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p> </form>
2.4:CSS 类,ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:
<style> input.ng-invalid { background-color: lightblue; } </style>
<form ng-app=""name="myForm"> 输入你的名字: <input name="myName" ng-model="myText"required> </form> <p>编辑文本域,不同状态背景颜色会发送变化。</p>
ng-model 指令根据表单域的状态添加/移除以下类:
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
重复元素 ng-repeat
遍历数组输出,常用于表格重复<div ng-app=""ng-init="names=['赵','钱','孙']"> <ling-repeat="x in names"> {{$index}} {{x}} </li> </div>
{{$index}}是数组序号
遍历数组对象
<div ng-app=""ng-init="people=[{name:'张三',country:'China'},{name:'李四',country:'China'},{name:'王五',country:'China'}]"> <ling-repeat="x in people"> {{x.name+ ',' + x.country}} </li> </div>
自定义指令 directive
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp",[]); app.directive("runoobDirective",function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body>
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
相关文章推荐
- AngularJS系列——表达式、常用指令和过滤器
- Angularjs系列之常用内置指令
- AngularJS系列之常用指令
- 走进AngularJs(二) ng模板中常用指令的使用方式
- 走进AngularJs(二) ng模板中常用指令的使用方式
- AngularJS 常用指令
- angularjs指令系统系列课程(5):控制器controller
- AngularJS常用插件与指令收集
- Angularjs常用的指令
- angularJS系列之指令directive应用实例
- 走进AngularJs(二) ng模板中常用指令的使用方式
- angularjs指令系统系列课程(2):优先级priority,模板template,模板页templateUrl
- AngularJS常用指令
- [angularjs] angularjs系列笔记(二)指令
- Angularjs+ionic 学习(一):Angularjs常用指令
- Linux自学系列 -- 常用指令的使用
- [置顶] angularJS 常用指令小结
- AngularJS常用指令
- angularjs(二)模板终常用的指令的使用方法
- [AngularJS] 常用指令