zoukankan      html  css  js  c++  java
  • Angularjs基础(三)

        AngularJS ng-model 指令
        ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
    ng-model指令
        ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
          实例:

          <div ng-app="myApp" ng-controller="myCtrl">
                名字:<input ng-model="name">
            </div>
            <script>
              var app = angular.module('mgApp',[]);
              app.controller('myCtrl',function($scope){
                  $scope.name = "John Doe";
              })
          </script>

    双向绑定
        双向绑定,在修改输入域的值时,AngularJS属性的值也将修改:
          实例:

            <div ng-app="myApp" ng-controller="myCtrl">
              名字:<input ng-model="name">
              <h1>你输入了:{{name}}</h1>
            </div>

    验证用户输入
        实例:

          <form ng-app="" name="myForm">
            Email:
              <input type="email" name="myAddress" ng-model="text">
              <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
          </form>

          以上实例中,提示信息会在ng-show 属性返回true的情况下显示

    应用状态
        ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)
          实例:

           <from ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
                Email:
                <input type="email" name="myAddress" ng-model="myText" required>
                <h1>状态</h1>
                {{myForm.myAddress.$valid}}
                {{myForm.myAddress.$dirty}}
                {{myForm.myAddress.$touched}}
            </from>

    CSS 类
        ng-model指令基于他们的状态为HTML 元素提供了CSS类:
          实例;

            <style>
                input .ng-invalid{
                  background-color:lightblue;
                }
            </style>
            <body>
              <from ng-app="" name="myForm">
                输入你的名字:
                <input name="myAddress" ng-model="text" required>
              </from>
            </body>

            ng-model 指令根据表单域的状态添加/移除一下类
            ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid
            ng-dirty ng-pending ng-pristine

    AngularJS Scope(作用域)

            Scope(作用域) 是应用在HTML(视图)和JavaScript(控制器)之间的纽带。
            Scope是一个对象,有可能的方法和属性。
            Scope可应用在视图和控制器上。

    如何使用Scope
          当你在AngularJS创建控制器时,你可以将$scope对象当做一个参数传递:
              实例: 控制器中的属性对应了视图上的属性:

                <div ng-app="myApp" ng-controller="myCtrl">
                    <h1>{{carname}}</h1>
                </div>
                <script>
                    var app = angular.module('myApp',[]);
                    app.controller('myCtrl',function($scope){
                    $scope.carname = "Volvo";
                    })
                </script>

                当在控制器中添加$scope对象时,视图(HTML)可以获取了这些属性
                视图中,你不需要添加$scope前缀,只需要添加属性名即可,如{{carname}}。

    Scope概述
        AngularJS应用组成如下:
        View(视图),即HTML。
        Model(模型),当前视图中可用的数据。
        Controller(控制器),即JavaScript 函数,可以添加或修改属性。
        scope 是模型。
        scope是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
          实例: 如果你改变了视图,模型和控制器也会相应更新。

            <div ng-app="myApp" ng-controller = "myCtrl">
                <input ng-model="name">
                  <h1>我的名字是{{name}}</h1>
            </div>
            <script>
              var app = angular.module('myApp',[]);
              app.controller('myCtrl',function($scope){
                  $scope.name = "John Dow";
              })
            </script>

    Scope 作用范围
        了解你当前使用的scope是非常重要的。
          实例:当我们使用ng-repeat 指令时,没个重复项都访问了当前的重复对象。

            <div ng-app="myApp" ng-controller="myCtrl">
              <ul>
                <li ng-repeat="x in name"></li>
              </ul>
            </div>
            <script>
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope){
                  $scope.names = ["Emil","Tobias","Linus"]
                });
            </script>

            每个<li>元素可以访问当前的重复对象,这里对应用的是一个字符串,并使用变量x 表示。

    根作用域
        所有的应用都有一个$rootScope,它可以作用在ng-app 指令包含的所有HTML 元素中。
        $rootScope可作用域整个应用中,是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
        实例:创建控制器时,将$rootScope作为参数传递,可在应用中使用:

          <div ng-app="myApp" ng-controller="myCtrl">
              <h1>{{lastname}} 家族成员:</h1>
              <ul>
                  <li ng-repeat="x in name">{{x}}{{lastname}}</li>
              </ul>
          </div>
          <script>
              var app = angular.module('myApp',[]);
              app.controller('myCtrl',function($scope,$rootScope){
                $scope.names = ["Emil","Tobias","Linus"];
                $rootScope.lastname = "Refsnes";
              })
          </script>

        AngularJS 控制器
        AngularJs 控制器 控制AngularJS 应用程序的数据。
        AngularJS 控制器是常规的JavaScript对象。
    AngularJS 控制器
          AngularJS 应用程序被控制器控制。
          ng-controller指令定义了应用程序控制器。
          控制器时JavaScript对象,由标准的JavaScript对象的构造函数 创建。
            实例:

              <div ng-app="myApp" ng-controller="myCtrl">
                  名:<input type="text" ng-model = "firstName"><br>
                  姓:<input type="text" ng-model = "lastName">
                  姓名:{{firstName +""+lastName}}
              </div>
              <script>
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope){
                    $scope.firstName = "John";
                    $scope.lastName = "Doe";
                  })
              </script>

          应用解析:
              AngularJS 应用程序由ng-app定义。应用程序在<div>内运行。
              ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。
              myCtrl 函数是一个JavaScript 函数。
              AngularJS 使用$scope对象来调用控制器。
              在AngularJS 使用$scope是一个应用像(属于应用变量和函数)
              控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)的对象。
              控制器在作用域中创建两个属性(firstName 和lastName)。
              ng-model 指令绑定输入域到控制器的属性(firstName 和lastName)。

    控制器方法
        上面的石磊演示了一个带有lastName 和firstName 这两个属性的控制器对象。
        控制器也可以有方法变量和函数
        实例

            <div ng-app="myApp" ng-controller="personCtrl">
              名:<input type="text" ng-model="firstName">
              姓:<input type="text" ng-model="lastName">
              姓名:{{fullName()}}
            </div>
            <script>
              var app = angular.module('myApp',[]);
              app.controller('personCtrl',function($scope){
                  $scope.firsName = "John";
                  $scope.lastName = "Doe";
                  $scope.fullName = function(){
                    return $scope.firstName + "" +$scope.lastName;
                }
              })
            </script>

    外部文件中的控制器
        在大型的应用程序中,通常是把控制器存储在外部文件中。
        只需要把<script>标签中的代码复制到名为personController.js的外部文件中即可:
          实例:

              <div ng-app="myApp" ng-controller = "personCtrl">
                  First Name:<input type="text" ng-model = "firstName">
                  Last Name:<input type="text" ng-model="lastName">
                  Full Name:{{firstName + " " +lastName}}
              </div>
              <script src="personController.js"></script>

    其他实例
        实例:
        

          angular.module('myApp',[]).controller('namesCtrl',function($scope){
          $scope.names = [
              {name:'Jani',country:'Norway'},
              {name:'Hege',country:'Sweden'},
              {name:'Kai',country:'Denmark'}
            ];
          });
        <div ng-repeat="myApp" ng-controller="nameCtrl">
          <ul>
            <li ng-repeat="x in name">
              {{x.name +'x' +x.country]}}
            </li>
          </ul>
        </div>
        <script src="namesController.js"></script>
  • 相关阅读:
    Android 3.0 r1 API中文文档(108) —— ExpandableListAdapter
    Android 3.0 r1 API中文文档(113) ——SlidingDrawer
    Android 3.0 r1 API中文文档(105) —— ViewParent
    Android 中文 API (102)—— CursorAdapter
    Android开发者指南(4) —— Application Fundamentals
    Android开发者指南(1) —— Android Debug Bridge(adb)
    Android中文API(115)——AudioFormat
    Android中文API(116)——TableLayout
    Android开发者指南(3) —— Other Tools
    Android中文API (110) —— CursorTreeAdapter
  • 原文地址:https://www.cnblogs.com/nmxs/p/5406063.html
Copyright © 2011-2022 走看看