AngularJS HTML DOM
    AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled指令
    ng-disabled指令直接绑定应用数据到HTML的disabled属性。
      实例:
      <div ng-app="" ng-init="mySwitch=true">
        <p>
          <button ng-disableled="mySwitch">点我!</button>
        </p>
        <p>
          <input type="checkbox" ng-model ="mySwitch">按钮
        </p>
        <p>
          {{ mySwitch }}
        <p>
    </div>
    实例讲解:
        ng-disabled 指令绑定应用程序数据“mySwitch”到HTML 的disabled 属性。
        ng-model 指令绑定 “mySwitch”到HTML input checkbox 元素的内容(value).
        如果mySwitch 为true ,按钮将不可用。
        <p>
          <button disabled>点我!</button>
        </p>
          如果 mySwitch 为false, 按钮则可用:
        <p>
          <button>点我!</button>
        </p>

ng-show 指令
    ng-show 指令隐藏或显示一个HTML 元素。
    实例
      <div ng-app="">
        <p ng-show="true">我是可见的</p>
        <p ng-show="false">我是不可见的</p>
      </div>
    ng-show指令是根据value的值来显示(隐藏)HTML元素。
    你可以使用表达式来计算布尔值(true或false):
    实例:
      <div ng-app="">
        <p ng-show="hour > 12">我是可见的</p>
      </div>

ng-hide指令
    ng-hide指令用于隐藏或者显示HTML 元素。
    实例
      <div ng-app="">
        <p ng-hide="true">我是不可见的</p>
        <p ng-hide="false">我是可见的</p>
      </div>

AngularJS 事件
    AngularJS 有自己的HTML 事件指令

ng-click 指令
    ng-click 指令定义了AngularJS 点击事件
    实例:
      <div ng-app="" ng-controller="myCtrl">
        <button ng-click="count = count +1">点我!</button>
        <p>{{ count }}</p>
      </div>

隐藏HTML元素
    ng-hide 指令用于设计应用部分是否可见
    ng-hide="true"设置HTML元素不可见,
    ng-hide="false"设置HTML 元素不可见。
    实例:
      <div ng-app="myApp" ng-controller="personCtrl">
        <button ng-click="toggle()">>隐藏/ 显示</button>
        <p ng-hide="myVar">
          名:<input type="text" ng-model="firstName">
          姓名:<input type="text" ng-model="lastName">
          Full Name:{{firstName + ""+lastName}}
        </p>
      </div>
      <script>
        var app = angular.module('myApp',[]);
        app.controller('personCtrl',function($scope){
        $scope.firstName = "John",
        $scope.lastName="Doe"
        $.scope.myVar = false;
        $scope.toggle = function(){
            $scope.myVar = !$scope.myVar;
          }
        })
    </script>
    应用解析:
      第一部分 personController与控制器章节类似。
        应用有一个默认属性:$scope.myVar = false;
        ng-hide指令设置<p>元素及两个输入域是否可见,根据myVar的值(true 或false)来设置是否可见
        toggle()函数用于切换myVar 变量的值(true 和false)
        ng-hide="true"让元素不可见。

显示HTML元素
    ng-show 指令可用于设置应用中心的一部分是否可见。
    ng-show="false" 可以设置HTML 元素 不可见。
    ng-show=“true”可以设置HTML元素可见。
      实例:
        <div ng-app="myApp" ng-controller="personCtrl">
          <button ng-click = "toggle()">隐藏/显示</button>
          <p ng-show ="myVar">
          名:<input type="text" ng-model="firstName">
          姓:<input type="text" ng-model="lastName">
          姓名:{{firstName +""+ lastName}}
          </p>
        </div>
        <script>
          var app = angular.module('myApp',[]);
            app.controller('personCtrl',function($scope){
                $scope.firstName = "John",
                $scope.lastName = "Doe"
                $scope.myVar = true;
                $scope.toggle = function(){
                    $scope.myVar = !$scope.myVar;
                }
          })
        </script>

AngularJS 模块
    模块定义了一个应用程序。
    模块是应用程序中不同部分的容器。
    模块是应用控制器的容器。
    控制器通常属于一个模块。

创建模块
    <div ng-app="myApp">...</div>
    <script>
      var app = angular.module("myApp",[]);
    </script>
    “myApp”参数对应执行应用的HTML元素。
    现在你可以在AngularJS 应用中添加控制器,指令,过滤器等。

添加控制器
    你可以使用ng-controller 指令来添加应用的控制器。
    实例:
      <div ng-app="myApp" ng-controller="myCtrl">
        {{firstName + "" +lastName}}
      </div>
      <script>
        var app= angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        })
      </script>

添加指令
      AngularJS 提供了很多内置的命令,你可以使用它们来为你的应用添加功能。
        实例:
          <div ng-app="myApp" runoob-directive></div>
          <script>
            var app = angular.module("myApp",[]);
            app.directive("runoobDirective",function(){
            return{
                template:"我在指令构造器中创建!"
              };
            })
        </script>

模块和控制器包含在JS 文件中
    通常AngularJS 应用程序将模块和控制器包含在JavaScript文档中
    <!DOCTYPE html>
    <html>
      <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">
        {{ firstName + " " + lastName }}
    </div>
    <script src="myApp.js"></script>
      <script src="myCtrl.js"></script>
    </body>
    </html>
      myApp.js
        var app = angular.module("myApp",[]);
        在模块定义中[] 参数用于定义模块的依赖关系。
        中括号[] 表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名。
      myCtrl.js
    app.controller("myCtrl",function($scope){
        $scope.firstName = "John";
        $scope.lastName ="Doe";
    })

函数会影响到全局命名空间
    JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
    AngularJS 模块让所有的函数的作用域在该模块下,避免了该问题。

什么时候载入库?
    在我们的实例中,所有的AngularJS 库都在HTML 文档的头部载入。
    对于HTML应用程序,通常建议把所有的脚本都放置在<body>元素的最底部。
    会提高网页的加载速度,因为HTML加载不受制于脚本加载。
    在我们的多个AngularJS 实例中您将看到AngularJS库是在文档的<head>区域被加载。
    在我们的实例中,AngularJS在<head>元素中被加载,因为对angular.module的调用只能在库加载完后才能进行。
    另一个解决方案在<body>元素中加载AngularJS 库,但是必须放置在您的AngularJS脚本前面:
    实例
      <!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">
            {{ firstName + " " + lastName }}
          </div>
        <script>
          var app = angular.module("myApp", []);
          app.controller("myCtrl", function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
          });
        </script>
        </body>
        </html>

Angularjs基础(六)的更多相关文章

  1. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  2. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  3. C#_02.15_基础六_.NET类

    C#_02.15_基础六_.NET类 一.类继承是一个类在另一个类的基础上进行的扩展. 继承的子类拥有父类的全部成员.索引子类拥有本身的全部成员以及父类的全部成员. 可以对基类成员进行隐藏,如果必须的 ...

  4. {Django基础六之ORM中的锁和事务}一 锁 二 事务

    Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在 ...

  5. day 71 Django基础六之ORM中的锁和事务

    Django基础六之ORM中的锁和事务   本节目录 一 锁 二 事务 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 锁 行级锁 select_for_update(no ...

  6. day 58 Django基础六之ORM中的锁和事务

      Django基础六之ORM中的锁和事务   本节目录 一 锁 二 事务 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 锁 行级锁 select_for_update( ...

  7. Django基础六之cookie和session

    Django基础六之cookie和session 目录 Django基础六之cookie和session 1. cookie和session介绍 1.1 cookie 简介 1.2 cookie的缺陷 ...

  8. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  9. AngularJS基础概念

    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...

随机推荐

  1. poj 1655 树的重心 && define注意事项

    http://blog.csdn.net/acdreamers/article/details/16905653 题意:给定一棵树,求树的重心的编号以及重心删除后得到的最大子树的节点个数size,如果 ...

  2. Format - Numeric

    1. 一些常用格式,参考链接:http://msdn.microsoft.com/en-us/library/0c899ak8(v=vs.110).aspx ; Console.WriteLine(v ...

  3. Weka:call for the EM algorithm to achieve clustering.(EM算法)

    EM算法: 在Eclipse中写出读取文件的代码然后调用EM算法计算输出结果: package EMAlg; import java.io.*; import weka.core.*; import ...

  4. python str、int、dict

    一.str print(dir(int))#['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', ...

  5. Js 对象数组,转化为字符串

    var str = [{"cuid":"23910","content":"是","type":&q ...

  6. Selenium2学习(十二)-- alert\confirm\prompt

    前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...

  7. mysql 统计连续天数

    以下为例子数据 图1 图1 首先根据要求取出BeforeMeal要在7.0以下 并且 bingAfterMeal要在11.1以下 select AccountId,CreateTime from Di ...

  8. TP5.0:跳转链接到某控制器下的某方法

    语法:{:url('控制器名/方法名')} 例如: 结果: 以上 END

  9. March 2 2017 Week 9 Thursday

    The first duty of love is to listen. 爱的首要责任是倾听. Yesterday, I read an article that says a successful ...

  10. 分享一个settings.xml

    <?xml version="1.0" encoding="UTF-8"?> <settings> <localRepositor ...