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

最新推荐文章于 2019-07-07 07:26:26 发布

gjc9620

最新推荐文章于 2019-07-07 07:26:26 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/gjc9620/article/details/42674857

版权

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

效果：选中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

gjc9620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
augular.js 菜鸟学习笔记（二）

AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。 AngularJS 控制器控制
复制链接

扫一扫