一.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. js基础概念-操作符

    操作符是操作数据值的符号,也叫做运算符. 按照操作个数分为:一元运算符,二元运算符,三元运算符. 按功能分为:位操作符,布尔操作符,乘性操作符,加性操作符,关系操作符,关系操作符,相等操作符,条件操作 ...

  2. 常见模块(四) os模块

    注: os模块是实现python程序对操作系统(operation system)的操作 1.对文件或者目录进行删除或者创建的相关操作 # os.rename("b"," ...

  3. nginx 文档链接

    https://www.cnblogs.com/wcwnina/p/8728391.html    NGINX简介 http://www.nginx.cn/doc/                  ...

  4. Discuz! X3 全新安装图文教程

    Discuz! 是腾讯旗下 Comsenz 公司推出的以社区为基础的专业建站平台,帮助网站实现一站式服务.让论坛(BBS).个人空间(SNS).门户(Portal).群组(Group).应用开放平台( ...

  5. PythonStudy——逻辑运算符 Logical Operators

    在Python中,None.任何数值类型中的0.空字符串“”.空元组().空列表[].空字典{}都被当作False,还有自定义类型,如果实现了 __ nonzero __ () 或 __ len __ ...

  6. Keepalived+LVS实现高可用负载均衡双主模式

    LVS是一种集群(Cluster)技术:采用IP负载均衡技术和基于内容请求分发技术.调度器具有很好的吞吐率,将请求均衡地转移到不同的服务器上执行,且调度器自动屏蔽掉服务器的故障,从而将一组服务器构成一 ...

  7. webpack 中，module、chunk、bundle 的区别（待补充）

    项目 区别 module 是开发中的单个模块 chunk 中文意思是"块",是指 webpack 在进行模块依赖分析的时候,代码分割出来的代码块 bundle

  8. Linux中安装python3.6和第三方库

    Linux中安装python3.6和第三方库 如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境,比如yum!!!!! ...

  9. bzoj5102: [POI2018]Prawnicy

    Description 定义一个区间(l,r)的长度为r-l,空区间的长度为0. 给定数轴上n个区间,请选择其中恰好k个区间,使得交集的长度最大. Input 第一行包含两个正整数n,k(1<= ...

  10. linux查看用户登录，操作历史等

    who 命令:显示当前当登录的用户的信息 who -b命令:显示系统最近一次的启动时间 w 命令:显示登录的用户及其当前执行的任务 last 命令:显示当前与过去登录系统的用户的信息 lastb 命令 ...