AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
<div ng-app="" ng-controller="tomController">
<input ng-model="tom.name"/>
<input ng-model="tom.age"/>
<div>{{tom.name+" "+tom.age}}</div>
</div>
<script>
function tomController($scope){
$scope.tom = {
name:"alice",
age:455
}
}
</script>
实例讲解:
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性:$scope.person。
person 对象有两个属性:firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
控制器属性
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以把函数作为对象属性:
<div ng-app="" ng-controller="tomController">
<input ng-model="tom.name"/>
<input ng-model="tom.age"/>
<div>{{tom.fullname()}}</div>
</div>
<script>
function tomController($scope){
$scope.tom = {
name:"alice",
age:455 ,
fullname:function (){
var a = $scope.tom;
return a.name+" "+ a.age ;
}
}
}
</script>
效果和上面也是一样的
控制器方法
控制器也可以带有方法:
<div ng-app="" ng-controller="tomController">
<input ng-model="tom.name"/>
<input ng-model="tom.age"/>
<div>{{tom.fullname()}}</div>
</div>
<script>
function tomController($scope){
$scope.tom={
name:"alice",
age:50
};
$scope.tom.fullname =function(){
return $scope.tom.name+" "+$scope.tom.age;
}
}
</script>
效果同上
外部文件中的控制器
在大型的应用程序中,通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可 --就是导包。就不给例子了。。
另一个实例
下面的实例我们将创建一个新的控制器文件:
<div ng-app="" ng-controller="peopleController">
<div ng-repeat=" x in people ">
<div>{{x.name+" "+x.age}}</div>
</div>
</div>
<script src="app.js"></script>
<!--以下为app.js的内容-->
<script>
function peopleController($scope){
$scope.people=[
{name:"aaa",age:12},
{name:"bbb",age:13},
{name:"ccc",age:14}
];
}
</script>
//output
aaa 12
AngularJS 过滤器
AngularJS 过滤器可用于转换数据:
过滤器 | 描述 |
---|---|
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
向表达式添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
(下面的两个实例,我们将使用前面章节中提到的 person 控制器)
uppercase 过滤器格式化字符串为大写:
<div ng-app="" ng-controller="peopleController">
<div>{{name|uppercase}}</div>
</div>
<script>
function peopleController($scope){
$scope.name="tom"
}
</script>
//output TOM
lowercase 过滤器格式化字符串为小写:
<div ng-app="" ng-controller="people">
<div>{{name|lowercase}}</div>
</div>
<script>
function people ($scope ){
$scope.name="TOM"
}
</script>
currency 过滤器
currency 过滤器格式化数字为货币格式
<div ng-app ng-controller="people">
<div>{{price|currency}}</div>
</div>
<script>
function people ($scope){
$scope.price=3000;
}
</script>
/ /output
$3,000.00
向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。
orderBy 过滤器根据某个表达式排列数组:
<div ng-app="" ng-controller="peopleController">
<div ng-repeat="x in people | orderBy:'name' ">
{{x.name}}
</div>
</div>
<script>
function peopleController ($scope){
$scope.people=[
{name:"tom"},
{name:"alice"},
{name:"jack"}
];
}
</script>
过滤输入
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集:
<div ng-app="" ng-controller="peopleController">
<input ng-model="name"/>
<div ng-repeat="x in people | orderBy:'name' | filter : name ">
{{x.name}}
</div>
</div>
<script>
function peopleController($scope){
$scope.people=[
{name:"tom"},
{name:"alice"},
{name:"jack"}
];
}
</script>
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
<div ng-app="" ng-controller="peopleController">
<table ng-repeat=" x in people ">
<tr>
{{x.Name}}
</tr>
</table>
</div>
<script>
function peopleController($scope,$http){
$http.get("http://192.168.21.24:3030",{
// "Content-Type": "application/x-javascript"
}).success(function(response){
console.log(response);
$scope.people= response;
});
}
</script>
192.168.21.24:3030 是我的另一台机器ip w3c原文为ip有跨域问题 关于跨域
/*output
Alfreds Futterkiste
*/
应用解析:
AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。
ng-controller 指令设置了 controller 对象 名。
函数 customersController 是一个标准的 JavaScript 对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态 JSON 数据。
原服务器数据文件为: http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php。
当从服务端载入 JSON 数据时,$scope.names 变为一个数组。
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的:
<div ng-app="" ng-controller="peopleController">
<table ng-repeat=" x in people ">
<tr>
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
<script>
function peopleController($scope,$http){
$http.get("http://192.168.21.24:3030",{
// "Content-Type": "application/x-javascript"
}).success(function(response){
console.log(response);
$scope.people= response;
});
}
</script>
//output
Alfreds Futterkiste | Germany |
Berglunds snabbk枚p | Sweden |
Centro comercial Moctezuma | Mexico |
Ernst Handel | Austria |
FISSA Fabrica Inter. Salchichas S.A. | Spain |
Galer铆a del gastr贸nomo | Spain |
Island Trading | UK |
K枚niglich Essen | Germany |
Laughing Bacchus Wine Cellars | Canada |
Magazzini Alimentari Riuniti | Italy |
North/South | UK |
Paris sp茅cialit茅s | France |
Rattlesnake Canyon Grocery | USA |
Simons bistro | Denmark |
The Big Cheese | USA |
Vaffeljernet | Denmark |
Wolski Zajazd | Poland |
排序显示
如果需要对表格进行排序,我们可以添加 orderBy 过滤器:
使用 uppercase 滤器
如果字母要转换为大写,可以添加 uppercase 过滤器:
添加css
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd)<span style="white-space:pre"> </span>{
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<div ng-app="" ng-controller="peopleController">
<table >
<tr ng-repeat=" x in people | orderBy:'Country' ">
<td>{{x.Name}}</td>
<td>{{x.Country | uppercase}}</td>
</tr>
</table>
</div>
<script>
function peopleController($scope,$http){
$http.get("http://192.168.21.24:3030",{
// "Content-Type": "application/x-javascript"
}).success(function(response){
console.log(response);
$scope.people= response;
});
}
</script>
Ernst Handel | AUSTRIA |
Laughing Bacchus Wine Cellars | CANADA |
Vaffeljernet | DENMARK |
Simons bistro | DENMARK |
Paris sp茅cialit茅s | FRANCE |
Alfreds Futterkiste | GERMANY |
K枚niglich Essen | GERMANY |
Magazzini Alimentari Riuniti | ITALY |
Centro comercial Moctezuma | MEXICO |
Wolski Zajazd | POLAND |
Galer铆a del gastr贸nomo | SPAIN |
FISSA Fabrica Inter. Salchichas S.A. | SPAIN |
Berglunds snabbk枚p | SWEDEN |
Island Trading | UK |
North/South | UK |
Rattlesnake Canyon Grocery | USA |
The Big Cheese | USA |
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
<div ng-app="" app-controller="people">
<button ng-disabled="haha" >333</button>
<input type="checkbox" ng-model="haha" />
{{haha}}
</div>
实例讲解:
ng-disabled 指令绑定应用程序数据 "haha" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "haha" 到 HTML input checkbox 元素的内容(value)。
<div ng-app="" app-controller="people">
<button ng-show="haha" >333</button>
<input type="checkbox" ng-model="haha" />
{{haha}}
</div>
效果: input 选择了 333的display 为true则显示 , false则为不显示
disabled 控制是否禁用 disable=“true”为禁用 反之亦然
使用逻辑运算符
使用==的例子<span style="font-family:SimSun;"> <div ng-app="" app-controller="people">
<button ng-show=="haha" > 123 " >333</button>
<input type="text" ng-model="haha" />
{{haha}}
</div></span>
<span style="font-family:SimSun;"> <div ng-app="" app-controller="people">
<button ng-show=="haha" > 123 " >333</button>
<input type="text" ng-model="haha" />
{{haha}}
</div></span>
使用>的例子:
<div ng-app="" app-controller="people">
<button ng-show="haha > 123 " >333</button>
<input type="text" ng-model="haha" />
{{haha}}
</div>