您的位置：首页 > Web前端 > JavaScript

augular.js 菜鸟学习笔记 （二）

2015-01-13 12:16 253 查看


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

bbb 13

ccc 14


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
Berglunds snabbk枚p
Centro comercial Moctezuma
Ernst Handel
FISSA Fabrica Inter. Salchichas S.A.
Galer铆a del gastr贸nomo
Island Trading
K枚niglich Essen
Laughing Bacchus Wine Cellars
Magazzini Alimentari Riuniti
North/South
Paris sp茅cialit茅s
Rattlesnake Canyon Grocery
Simons bistro
The Big Cheese
Vaffeljernet
Wolski Zajazd

*/

应用解析:

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 FutterkisteGermany
Berglunds snabbk枚pSweden
Centro comercial MoctezumaMexico
Ernst HandelAustria
FISSA Fabrica Inter. Salchichas S.A.Spain
Galer铆a del gastr贸nomoSpain
Island TradingUK
K枚niglich EssenGermany
Laughing Bacchus Wine CellarsCanada
Magazzini Alimentari RiunitiItaly
North/SouthUK
Paris sp茅cialit茅sFrance
Rattlesnake Canyon GroceryUSA
Simons bistroDenmark
The Big CheeseUSA
VaffeljernetDenmark
Wolski ZajazdPoland


排序显示

如果需要对表格进行排序，我们可以添加 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 HandelAUSTRIA
Laughing Bacchus Wine CellarsCANADA
VaffeljernetDENMARK
Simons bistroDENMARK
Paris sp茅cialit茅sFRANCE
Alfreds FutterkisteGERMANY
K枚niglich EssenGERMANY
Magazzini Alimentari RiunitiITALY
Centro comercial MoctezumaMEXICO
Wolski ZajazdPOLAND
Galer铆a del gastr贸nomoSPAIN
FISSA Fabrica Inter. Salchichas S.A.SPAIN
Berglunds snabbk枚pSWEDEN
Island TradingUK
North/SouthUK
Rattlesnake Canyon GroceryUSA
The Big CheeseUSA


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>


效果：选中input button则变为可用状态 取消为禁用

实例讲解：

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>







使用>的例子：

<div ng-app="" app-controller="people">
<button ng-show="haha > 123 " >333</button>
<input type="text" ng-model="haha" />
{{haha}}
</div>


感谢
w3c
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航