AngularJS 最常用的八种功能(基础知识)

AngularJS 使用基础知识

第一 迭代输出之ng-repeat标签

ng-repeat让table ul ol等标签和js里的数组完美结合

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

你甚至可以指定输出的顺序:

<li ng-repeat="person in persons | orderBy:'name'">

第二 动态绑定之ng-model标签 任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量, 而且是动态绑定。

<input type="text" ng-model='password'>

对于绑定的变量,你可以使用{{}} 直接引用

<span>you input password is {{password}}</span>

如果你熟悉fiter,你可以很容易的按你的需要格式输出

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三 绑定点击事件之ng-click事件

使用ng-click你可以很容易的为一个标签绑定点击事件。

<button ng-click="pressMe()"/>

当然前提是你要在$scope域中定义的自己的pressMe方法。

和传统的onclick方法不同,你甚至可以为ng-click方法传递一个对象,就像这样:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

当然还有ng-dblclick标签

第四 分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签

分支语句让你在界面上都可以写逻辑

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签

表单中的输入框,你可以使用上面的标签来实现对用户输入的校验。

从字面意思上你已经知道了它们的意思。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

你可以通过 scope.yourForm.inputText.error.required 来判断输入框是否为空

你可以通过 scope.yourForm.inputText.invalid 来判断输入的内容是否满足ng-pattern,ng-maxlength,maxlength

你通过$scope.userNum获得的输入内容是去掉前后空白的,因为ng-trim的存在。

第六 下拉框之ng-options标签

ng-options是为下拉框专门打造的标签。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

下拉框中显示的是person.name,当你选中其中一个的时候,你可以通过yourSelected得到你选中的person.id.

第七 控制css之ng-style标签

ng-style帮你轻松控制你的csyour color通过给myColor赋值的形式来改变你想要的效果,就像scope.myColor=color:′blue′;scope.myColor={cursor: 'pointer',color:'blue'}; 异步请求之http对象。AngularJS提供了一个类似jquery的.ajax的对象,用于异步请求。

在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

如果你是POST请求,params里的数据会帮你拼到url后面,data里的数据会放到请求体中。

以上所述是小编给大家介绍的AngularJS 最常用的八种功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Angularjs基础知识及示例汇总

    angularjs是google开发的一款高大上的前端mvc开发框架. Angularjs官网:https://angularjs.org/ 官网有demo,访问可能需要FQ Angularjs中国社区:http://www.angularjs.cn/ 适合初学者 引用文件:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js 使用angular注意 引用angularjs库:https://github.com

  • Angularjs 基础入门

    针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写 1.angular.element 2.angular.Bootstrap 我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤 1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点. 2.加载与module相关的指令 3.创建与应用相关的injector(依赖管理器) 4.以制定的ng-app为根节

  • AngularJS学习第一篇 AngularJS基础知识

    AngularJS学习第一篇,了解指令.过滤器等相关内容. 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 1. ng-app: 定义了 AngularJS 应用程序的根元素: ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序: <div ng-app="Demo"></div> 2. ng-init: 为 AngularJS 应用程序定义了 初始值: 通常情况下,我们使用一个控制器或模块来代替它: <div n

  • AngularJS基础知识

    angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听Model的变化.这些可以通过View来发送和渲染,由HTML来展示你的代码 3.方便的REST 4.数据绑定和依赖注入 5.可以操作XML一样操作HTML,AngularJS通过自己的编译器和directives来完成相关的设置 6.模板被作为DOM元素传递到Angular的编译器 7.Angul

  • AngularJS实用基础知识_入门必备篇(推荐)

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q

  • AngularJS 最常用的八种功能(基础知识)

    AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repeat="person in pers

  • Java常用的八种排序算法与代码实现

    目录 1.直接插入排序 2.希尔排序 3.简单选择排序 4.堆排序 5.冒泡排序 6.快速排序 7.归并排序 8.基数排序 1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直到最后一个数,重复第二步. 如何写写成代码: 首先设定插入次数,即循环次数,for(int i=1;i<length;i++),1个数的那次不用插入. 设定插入数和得到已经排好

  • Java常用的八种排序算法及代码实现+图解

    目录 1.冒泡排序 冒泡排序法的思路 2.冒泡排序法的代码实现 3.冒泡排序法优化 4.选择排序 5.插入排序 插入排序的思路 经典的排序算法有八种,分别为: 冒泡排序 选择排序 插入排序 归并排序 希尔排序 快速排序 堆排序 基数排序 其中冒泡排序.选择排序.插入排序称为三大基本排序. 虽然这三大基本排序算法时间复杂度都是O(n2),但是其实细细讨论之下,还是有各自的特点的. 1.冒泡排序 冒泡排序法的思路 基本思路: 假设我们需要进行升序排列 进行N轮的比较,每一轮将相邻的两个元素依次比较,

  • AngularJS 让人爱不释手的八种功能

    八种AngularJS让人爱不释手的功能分享给大家,供大家参考,具体内容如下 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repea

  • AngularJS 最常用的功能汇总

    AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发.如同其他的抽象技术一样,这也会损失一部分灵活性.换句话说,并不是所有的应用都适合用AngularJS来做.AngularJS主要考虑的是构建CRUD应用.幸运的是,至少90%的WEB应用都是CRUD应用.但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建. 如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建.像这种情

  • Selenium Webdriver元素定位的八种常用方式(小结)

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下. 1. By.name() 假设我们要测试的页面源码如下: <button id="gbqfba" aria-label="Google Search" name="btnK" class="gbqfba"><

  • JAVA设计模式零基础解析之单例模式的八种方式

    目录 单例模式简介: 单例模式优点: 应用场景: 单例设计模式的八种方式: 1.饿汉式(静态常量) 2.饿汉式(静态代码块) 3.懒汉式(线程不安全) 4.懒汉式(线程安全,同步方法) 5.懒汉式(线程安全,同步代码块) 6.双重检查(推荐使用) 7.静态内部类(推荐使用) 8.枚举(推荐使用) 单例模式在JDK应用的源码分析 单例模式注意事项和细节说明 单例模式简介: 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了

  • 10行Python代码就能实现的八种有趣功能详解

    目录 一.生成二维码 二.生成词云 三.批量抠图 四.文字情绪识别 五.识别是否带了口罩 六.简易信息轰炸 七.识别图片中的文字 八.简单的小游戏 Python凭借其简洁的代码,赢得了许多开发者的喜爱.因此也就促使了更多开发者用Python开发新的模块,从而形成良性循环,Python可以凭借更加简短的代码实现许多有趣的操作.下面我们来看看,我们用不超过10行代码能实现些什么有趣的功能. 一.生成二维码 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个

  • JavaScript常用基础知识强化学习

    首先,还是用比较官方的文字描述来解释下JavaScript: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript拥有以下几个特点: · 脚本语言.JavaScript是一种解释型的脚本语言,C.C++等语言先编译后执行,而JavaScript是在程序的运行

随机推荐