一.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学习笔记(二)的更多相关文章

  1. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  2. AngularJS 学习笔记二

    AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...

  3. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  4. AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

    这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...

  5. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  6. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  7. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  8. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  9. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

随机推荐

  1. alpha冲刺（1/10）

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 构建之法的阅读 问题困扰: Java的学习感觉无从下手,学基础语法好 ...

  2. Web.xml详解分析

    一.首先了解项目加载的优先级 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. 最终得出的结 ...

  3. （32）forms组件（渲染自建规则：局部钩子函数和全局钩子函数）

    要达成渲染自建规则 1.局部钩子函数(某个字段,自定意义规则,不如不能以sb开头,数据库已存在等) 2.全局钩子函数(校验两次密码是否一致) 3.使用css样式 register.html <! ...

  4. Greenplum（4.3.73）集群安装手册

    1. 概述 本文档仅限于指导Greenplum 4.3.7.3(对应安装包greenplum-db-4.3.7.3-build-2-RHEL5-x86_64.bin)版本在CentOS6.5 系统进行 ...

  5. 使用VS2015编译grpc_1.3.1

    环境: win7_x64,VS2015 开始: 一.安装工具 1. 安装cmake 2. 安装ActivePerl 3. 安装golang 4. 安装nasm 验证安装是否安装成功: cmake -v ...

  6. centos7使用snmp

     一.安装snmp net-snmp :服务端 net-snmp-utils:客户端工具集   二.启动 systemctl start snmpd   三.修改配置文件(完整的配置文件如下) com ...

  7. STS启动时卡在loading加载 dashboard.ui

    如果你在用STS 3.4或3.5,启动时可能会卡在 解决方法:打开STS安装目录下的plugins目录,删除文件 org.springsource.ide.eclipse.dashboard.ui_3 ...

  8. maven打包时报错：-source 1.5 中不支持 diamond 运算符

    报错现象: 解决方法: 在pom文件中加入下面依赖 <build> <plugins> <plugin> <groupId>org.apache.mav ...

  9. 使用Tensorflow操作MNIST数据

    MNIST是一个非常有名的手写体数字识别数据集,在很多资料中,这个数据集都会被用作深度学习的入门样例.而TensorFlow的封装让使用MNIST数据集变得更加方便.MNIST数据集是NIST数据集的 ...

  10. IDEA—— 找不到或无法加载主类Main

    最近使用idea,编写了一个项目,发现老是找不到main,网上找了一大圈的解决方案,都不行.灵机一动升级了jdk就可以了,之前用的是1.7的,换成了1.8的就好了.