博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs初识
阅读量:5900 次
发布时间:2019-06-19

本文共 1574 字,大约阅读时间需要 5 分钟。

周三的时候跟着老师简单的入门了angularjs,然后去图书馆找了一本《Angularjs实战》来看了看,虽然这本书网上的评价不太高,但对于初学者的我来说还是不错的,有较详尽的示例代码和比较清楚的代码讲解。总的来说,收获很大。

这里这里就以一些常用的html标签谈谈angularjs中的基础知识。

全局对象window

在angularjs中的全局对象window被$window所替换,也就是说在angularjs中若想使用window的方法如alert等,就需要:

$window.alert('....')这样调用

还记得刚开始接触js时,最喜欢用alert调试代码,因为他很醒目,不过这是最差的方式,console,和debugger更加优越。

ng-repeat

这是一个相当重要方便和重要的标签,和thinkphp的volist一样,不过比其还是要强大一些,它比volist多了一些属性

$first 该记录是否是首条$last  是否是最后一条$middle 记录是否是中间条这些都是是则返回true,否则返回false。然后还有一个$index 表示记录的索引号,从0开始。

ng-repeat,ng-class以及angularjs的数据双向绑定配合使用可以轻松实现一些看着比较高级的操作

clipboard.png

点击选中效果和隔行颜色变化

代码如下:

    
添加元素样式
  • 序号 姓名 性别 是否首条 是否尾条
  • {
    {$index+1}}
    {
    {stu.name}}
    {
    {stu.sex}}
    {
    {$first?'是':'否'}}
    {
    {$last?'是':'否'}}

模表单控件

form

首先就是form表单,angularjs给与了form表单5个属性

$pristine   表示表单或控件是否未输入过$dirty      表示是否已输入过$valid      表示是否已验证通过$invalid    表示是否未验证通过$error      验证时的错误提示信息

若是能够好好利用这些信息,可以完成很多纯html较难完成的操作,如果感兴趣,就自己打印出来看看有些啥,在此不多讨论

单选框和复选框

在复选框中可以赋予其ng-true-value,ng-false-value属性,让其在选中和未选中时可以触发不同效果,其他方面没啥深究的。

select

select在angularjs中变得更加强大了,这也是本篇博客的重点,select绑定数据的形式主要有三种:

(1)绑定简单的数组数据,就和普通的select一样
(2)绑定简单的对象数据

在页面通过“ng-options”属性值,采用"...as...for...in.."格式将对象与select绑定

clipboard.png

as前面的部分对应元素的value值,用于选中时获取,后面的用于显示

clipboard.png

选择小学后的效果

(3)一分组的形式绑定数据

clipboard.png

clipboard.png

是否发现了什么不同想知道他的作用吗?
别急,下面就给你看
clipboard.png

有了这个只有两段的级联就可以省去了。

angularjs已经用这个数组的grade值替他们分好了组了,是不是感觉很强大,angularjs还有很多强大的地方等着我们去学习,掌握它,还有更强大的angular等着我们。

转载地址:http://onesx.baihongyu.com/

你可能感兴趣的文章
Docker基础知识
查看>>
Node.js EventEmitter
查看>>
洛谷——P1141 01迷宫
查看>>
Vuejs——(10)组件——父子组件通信
查看>>
设计模式
查看>>
【栈】射击游戏(待更新)
查看>>
xpath选择器
查看>>
(转)iOS7界面设计规范(3) - UI基础 - 启动与退出
查看>>
php源码加密--screw plus
查看>>
oracle触发器详解
查看>>
textkit
查看>>
Spring MVC中前后台数据传输小结
查看>>
Android详细的对话框AlertDialog.Builder使用方法
查看>>
Ubuntu下安装webstorm
查看>>
2594 解药还是毒药
查看>>
Spring中使用@Profile指定不同的环境
查看>>
《精进:如何成为一个很厉害的人》读书笔记(转载)
查看>>
linux下修改/etc/profile文件
查看>>
mvn库
查看>>
wordpress中常用的一些php代码
查看>>