AngularJS学习笔记(二)
一.AngularJS Select(选择框)
1.使用 ng-options 创建选择框
<div ng-app="myApp" ng-controller="myCtrl"><select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script>
2.使用 ng-repeat 指令来创建下拉列表
<div ng-app="myApp" ng-controller="myCtrl"><select> <option ng-repeat="x in names">{{x}}</option> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script>
3.使用了数组作为数据源: x 为键(key), y 为值(value)
<div ng-app="myApp" ng-controller="myCtrl"><p>选择一辆车:</p> <select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select> <h1>你选择的是: {{selectedCar.brand}}</h1> <h2>模型: {{selectedCar.model}}</h2> <h3>颜色: {{selectedCar.color}}</h3> <p>注意选中的值是一个对象。</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"} } }); </script>
表格显示序号可以在 <td> 中添加 $index,
过滤器转换为大写: 使用 uppercase,
排序显示,可以使用 orderBy过滤器
style="{{$even?'background-color: #f1f1f1':''}}" 隔行变色
二.AngularJS HTML DOM
1.ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
2.ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。
3.ng-hide 指令用于隐藏或显示 HTML 元素。
4.ng-click 指令定义了 AngularJS 点击事件。
tips:AngularJS 在 <head> 元素中被加载,但也可以在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面
三.AngularJS API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合
angular.lowercase() | 转换字符串为小写 |
angular.uppercase() | 转换字符串为大写 |
angular.isString() | 判断给定的对象是否为字符串,如果是返回 true。 |
angular.isNumber() | 判断给定的对象是否为数字,如果是返回 true。 |
四. AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容
AngularJS学习笔记(二)的更多相关文章
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS 学习笔记二
AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...
- angularJS学习笔记二
angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
随机推荐
- imp导入时 出现IMP-00017:由于 ORACLE 错误 6550, 以下语句失败: 解决方法
cmd命令下--执行imp命令时,出现IMP-00017:由于 ORACLE 错误 6550, 以下语句失败: 解决办法:在imp命令里加入 statistics=none (不导入数据库统计信息) ...
- Python数据存储:pickle模块的使用讲解
在机器学习中,我们常常需要把训练好的模型存储起来,这样在进行决策时直接将模型读出,而不需要重新训练模型,这样就大大节约了时间.Python提供的pickle模块就很好地解决了这个问题,它可以序列化对象 ...
- Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable)
To fix it, just kill the apt process. ps -aux | grep -i apt sudo kill -9 "the process ID"
- Vue的理解:Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Linux cp命令详解
Linux cp命令 Linux cp命令主要用于复制文件或目录,将源文件复制至目标文件,或将多个源文件复制至目标目录 用法: cp [选项]... [-T] 源文件 目标文件 cp [选项]... ...
- MySQL Antelope和Barracuda的区别分析
Antelope是innodb-base的文件格式,Barracude是innodb-plugin后引入的文件格式,同时Barracude也支持Antelope文件格式.两者区别在于: 文件格式 支持 ...
- VS调试提示“无法启动程序,“...exe”。系统找不到指定文件
当VS调试提示上图所示的警告时,常用的方法是检查“项目”-“属性”-“配置属性”-“常规”-“输出目录”里的路径 项目”-“属性”-“配置属性”-“链接器”-“常规”-“输出文件”里的路径,是否一致, ...
- maven仓库配置阿里云镜像
maven仓库的默认镜像为国外镜像,下载jar包依赖非常慢,可以将镜像设置为国内的阿里云. 只需要在maven的conf的setting中配置如下: <mirrors> <mirro ...
- mysql 5.7 修改字符编码
在my.ini文件中添加 [mysqld]character-set-server = utf8 [client]default-character-set = utf8
- C语言中的作用域,链接属性和存储类型
作用域 当变量在程序的某个部分被声明的时候,他只有在程序的一定渔区才能被访问,编译器可以确认4种不同类型的作用域:文件作用域,函数作用域,代码块作用域和原型作用域 1.代码块作用域:位于一对花括号之间 ...