一:http

XMLHttpRequest:$http是angularjs的一个核心服务,用于读取远程服务器的数据。
$http.get(url) 是用于读取服务器数据的函数。
举例:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/web/test.jsp")
.success(function(response) {$scope.names = response.records;});
});
</script>

JSON格式字符串:
{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
}
]
}

二:PHP Ajax 跨域问题最佳解决方案

通过设置Access-Control-Allow-Origin来实现跨域。
例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。
如果直接使用ajax访问,会有以下错误:
XMLHttpRequest cannot load http://server.runoob.com/server.php.
No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access.

1、允许单个域名访问
指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:http://client.runoob.com');

2、允许多个域名访问
指定多个域名(http://client1.runoob.com、http://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
'http://client1.runoob.com',
'http://client2.runoob.com'
);

if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}

3、允许所有域名访问
允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');

三:使用 ng-options 创建选择框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<select ng-model="name" ng-options="x for x in names">{{x}}</select>
</div>
<script>
angular.module('myApp',[]).controller('myCtrl',function($scope){
$scope.name = 'google';
$scope.names = ['google','baidu','360'];
});
</script>
</body>
</html>

四:angularjs在表格中显示数据

<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/web/test.jsp")
.success(function (response) {$scope.names = response.records;});
});
</script>

五:显示序号 ($index) ng-disabled ng-show ng-hide指令

1:添加序号
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

2:ng-disabled禁用指令
当ng-disabled为true时,则控件将被禁用;
为false时,控件可用。
举例:
<div ng-app="myApp">
<p>
<button ng-disabled="switch">点击</button>
</p>
<p>
<input type="checkbox" ng-model="switch"/>
</p>
<p>
{{switch}}
</p>
</div>

3:ng-show,显示或者隐藏一个html元素
ng-show="true"时,显示元素,为false时,隐藏元素。
<div ng-app="myApp" ng-init="switch=true">
举例:
<p>
<button type="button" ng-show="switch">点击</button>
</p>
<p>
<input type="checkbox" ng-model="switch"/>
</p>
<p>
{{switch}}
</p>
</div>

4:ng-hide,显示或者隐藏一个html元素
ng-hide的值为true时,隐藏元素,ng-hide的值为false时,显示元素
ng-hide的值可以为一个直接量,也可以是一个表达式。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="toggle()">点击</button>
<div ng-hide="myVar">
<p>名:<input type="text" ng-model="firstname"/></p>
<p>姓:<input type="text" ng-model="lastname"/></p>
</div>
<div>{{firstname+" "+lastname}}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "Tom";
$scope.lastname = "Son";
$scope.myVar = false;
$scope.toggle = function(){
$scope.myVar = !$scope.myVar;
};
});
</script>
</body>
</html>

六:angularjs事件

ng-click:点击事件,点击然后触发事件。
<div ng-app="">
<p>
<button ng-click="count=count+1">点击</button>
</p>
<p>
{{count}}
</p>
</div>

七:人员信息汇总表

css样式部分:

<style>
table{
width: 100%; //实现页面宽度全部展开
height: 100%;
}
table,th,td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

js部分:

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
//全部勾选/全部不选
$scope.checkAll = function() {
var el = document.getElementsByTagName('input');
//如果已经是勾选状态
if (el[0].checked == false) {
for (var i = 1; i <= $scope.names.length; i++) {
if ((el[i].type == "checkbox")
&& (el[i].name == "check")) {
el[i].checked = false;
}
}
;
} else {
for (var i = 1; i <= $scope.names.length; i++) {
if ((el[i].type == "checkbox")
&& (el[i].name == "check")) {
el[i].checked = true;
}
}
;
}
};
$http.get('http://localhost:8080/web/test.jsp').success(
function(response) {
$scope.names = response.records;
});

});
</script>

视图html部分:

<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p style="font-family: '微软雅黑'; font-size: '20px'">angularjs表格</p>
<table>
<tr>
<th><input type="checkbox" ng-click="checkAll();" /></th>
<th>序号</th>
<th>姓名</th>
<th>居住地</th>
<th>国籍</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in names | orderBy:'country'">
<td><input id="checkboxes" type="checkbox" name="check" /></td>
<td>{{$index+1}}</td>
<td>{{x.Name}}</td>
<td>{{x.City|lowercase}}</td>
<td>{{x.Country| uppercase }}</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加</a></td>
</tr>
</table>
</div>
</body>

angualrjs学习总结三(http、select、表格、指令以及事件)的更多相关文章

  1. SQL学习(三)Select语句:返回前多少行数据

    在实际工作中,我们可能根据某种排序后,只需要显示前多少条数据,此时就需要根据不同的数据库,使用不同的关键字 一.SQL Server/Access select top 数量/百分比 from tab ...

  2. CMake学习笔记三:cmake 常用指令

    1 基本指令 1,ADD_DEFINITIONS 向 C/C++编译器添加-D 定义,比如: DD_DEFINITIONS(-DENABLE_DEBUG -DABC),参数之间用空格分割. 如果你的代 ...

  3. C#学习笔记三(委托·lambda表达式和事件,字符串和正则表达式,集合,特殊的集合)

    委托和事件的区别 序号 区别 委托 事件 1 是否可以使用=来赋值 是 否 2 是否可以在类外部进行调用 是 否 3 是否是一个类型 是 否,事件修饰的是一个对象 public delegate vo ...

  4. iView学习笔记(三):表格搜索,过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  5. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  6. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  7. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  8. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  9. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

随机推荐

  1. C#数据上传方法

    /// <summary> /// 连接成功后开始调用数据上传程序 /// </summary> public void CallDataUpload() { //指定上传日期 ...

  2. vs2010中的快捷键

    1.Ctrl+TAB  vs中各个页进行切换. 2.shift+alt+F10 用于帮助绑定选定项的选项.就用于写了一个类(Regex),需要导入其所在命名空间时(using System.Text. ...

  3. android NDK 实用学习(一)-获取java端类及其类变量

    近期为android 端项目包装一些c++代码,故学习ndk相关知识,现总结如下: 1,java与c++类型参照图: 2,此测试中使用的java类: package com.dasea.test.co ...

  4. Docker系列(八)Kubernetes介绍

    Kubernetes组件功能图   各组件说明: 节点 节点在Kubernetes由虚拟机或者实体机表示,常称为Minion,即从属主机.当一个节点加入到Kubernetes系统中时,它将会创建一个数 ...

  5. 配置OpenStack以使用LDAP实现身份管理

    本文展示了如何配置 Keystone,以便使用轻量级目录http://www.aliyun.com/zixun/aggregation/34570.html">访问协议( LDAP)服 ...

  6. 在virtualbox上安装mac os mavericks遇到Missing Bluetooth Controller Transport问题解决办法

    挂载 HackBoot_Mav.iso 作为光驱,启动在 磁盘选择 界面,选择磁盘后按空格键,输入 启动参数 -v -x(-x的意思是安全模式,不这样的话,有蓝牙驱动作怪, 会输出 [IOBlueto ...

  7. C++学习笔记(十):类

    类的定义: C++中使用关键字 class 来定义类, 其基本形式如下: class 类名 { public: //公共的行为或属性 protected: //受保护的行为或属性 private: / ...

  8. MSSQLSERVER数据库- 一条代码搞定单表备份表结构和表数据

    在百度上找到的,很实用这个容易操作,不就两张表,我的建议就是备份表带上日期,以便以后要恢复数据的时候,可以快速找到他,这样备份是表结构和数据一起处理.select * into share_20090 ...

  9. 精彩,sinox.org官网贴满winxp死亡大字报

    sinox杀死windowxp不可避免,不用说,微软还自己掐死他!!! 中国人会升级正版 windows7吗?昨天也许会,但今天不会了,因为 sinox大字报出来了! 这下举国皆知了. 换装sinox ...

  10. AT指令

    AT+CMGF=0  初始化 AT+IPR=115200 AT+CPAS   查询工作状态,0:可以接受AT指令,1:不能接受AT指令 ATA  应答本次电话 ATSO=2 设置2秒后自动应答 ATS ...