angularjs初识

tanglijun 发布于2019-08-23 11:49 / 1855人阅读

摘要：总的来说，收获很大。这里这里就以一些常用的标签谈谈中的基础知识。然后还有一个表示记录的索引号，从开始。已经用这个数组的值替他们分好了组了，是不是感觉很强大，还有很多强大的地方等着我们去学习，掌握它，还有更强大的等着我们。

周三的时候跟着老师简单的入门了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的数据双向绑定配合使用可以轻松实现一些看着比较高级的操作

点击选中效果和隔行颜色变化
代码如下：



    
    
    
    添加元素样式
    
    



    
        
            序号
            姓名
            性别
            是否首条
            是否尾条
        
        
        
            {{$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绑定

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

选择小学后的效果

（3）一分组的形式绑定数据

是否发现了什么不同想知道他的作用吗？
别急，下面就给你看

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

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

GPU云服务器云服务器 docker初识初识关系数据库 AngularJS angularjs cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97519.html

angular - 收藏集 - 掘金

摘要：如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架，能够创建功能强大，动态功能的。自发布以来，已经广泛应用于开发中。如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...

AlexTuan 2019-08-20 17:19 评论0 收藏0
初识React

摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。初识React 依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Co...

kuangcaibao 2019-08-21 14:47 评论0 收藏0
2017-06-29 前端日报

摘要：前端日报精选如何在非项目中使用知乎专栏编码规范最常被遗忘的性能优化浏览器缓存个人文章译统一样式语言掘金新的开发者提及最多的个视频众成翻译中文第期在中使用译统一样式语言掘金前端现状答题救不了前端新人相学长怼前端岁以 2017-06-29 前端日报精选如何在非 React 项目中使用 Redux - 知乎专栏Javascript编码规范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（一） --- 相关背景、社区、工具介绍

摘要：下一篇译精通使用开发二原版书名第一章之道这一章主要是介绍，包括这个框架以及它背后的项目。幸运的是，拥有一个活跃的，支持度高的社区。另外，社区还为已经存在的工具箱里贡献了许多有意思的工具。下一篇：【译】《精通使用AngularJS开发Web App》（二）原版书名：Mastering Web Application Development with AngularJS Ch...

ddongjian0000 2019-08-19 14:26 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（二） --- 框架概览，双向数据绑定，MVC

摘要：本书的这一部分将为随后的章节打下基础，会涵盖模板，模块化，和依赖注入。本书的小例子中我们会使用未经压缩的，开发友好的版本，在的上。作用域也可以针对特定的视图来扩展数据和特定的功能。上一篇：【译】《精通使用AngularJS开发Web App》（一）下一篇：【译】《精通使用AngularJS开发Web App》（三）原版书名：Mastering Web Application D...

geekidentity 2019-08-19 14:26 评论0 收藏0