angualrjs学习总结三(http、select、表格、指令以及事件)

一: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>

时间: 2024-10-16 22:55:32

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

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

在实际工作中,我们可能根据某种排序后,只需要显示前多少条数据,此时就需要根据不同的数据库,使用不同的关键字 一.SQL Server/Access select top 数量/百分比 from table 如: select top 10 from ticket---返回ticket表中的前10行数据 select top 10 from ticket where name='测试'---返回ticket表中,name为测试的前10行数据 select top 10 from ticket or

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

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属

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

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke

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

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-

angular学习笔记(三十)-指令(2)

本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而

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

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

angular学习笔记(三十)-指令(1)

之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or str

javaweb学习总结(三十二)——JDBC学习入门【转】

原文地址:javaweb学习总结(三十二)——JDBC学习入门 一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后 才能够使用声卡和网卡,同样道理,我们安装好数据库之后,我们的应用程序也是不能直接使用数据库的,必须要通过相应的数据库驱动程序,通过驱动程序去和数 据库打交道,如下所示: 1.2.JDBC介绍 SUN公司为了简化.统一对数据库的操作,定义了一套Java操作

从零开始学习jQuery (三) 管理jQuery包装集

本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明. 本章内容很少, 主要讲解动态创建元素和操作jQuery