AngularJS系列(一)——常用指令

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/luo4105/article/details/77893963

资料

学习参考: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 作为注释使用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券