<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-showAndng-hide</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>

<body>

  <div ng-app="You" ng-controller="ctrl">
    <div>I'm jiao Dashu and I'm leaning H5 on the school{{title}}</div>
    <div><input type="text" ng-model="title"></div>
    <div><input type="text" ng-value="title"></div>
    <button ng-click="toggle()">show/hidden</button>
    <div style="width: 200px;height: 150px;border:1px solid #ccc;" ng-show="isShow">This is a long adver !</div>
    <button ng-click="toggleDisabled()">toggle the state of input</button>
    <div><input type="text" ng-disabled="isDisabled"></div>
  </div>

  <div ng-app="Repeat" ng-controller="ctrl">
    <ul>
      <!--ng-class-odd/ng-class-even"没出来效果-->

      <li ng-repeat="v in data" ng-class-odd="{red:true}" ng-class-even="{blue:true}">ID:{{v.id}}:{{v.title}}(click number:{{v.click}})</li>
    </ul>
    <div ng-style="{color:'red',fontSize:'30px'}">this is a things long long ago!</div>
    <button ng-click="fn()">click</button><button ng-dblclick="fn()">doubleClick</button>
    <input type="text">
  </div>

  <form ng-app="Submit" ng-controller="ctrl" name="qianfeng">
    <input type="text" name="title" ng-model="title" ng-trim="false">专注{{title}}移动端研发
    <input type="text" ng-model="content">
    <input type="submit" value="提交">
  </form>

  <select ng-app="Select" ng-controller="ctrl" ng-model="current" ng-options="v.value as v.name for v in data"></select>

  <div ng-app="demo" ng-controller="ctrl">
    <input type="checkbox" ng-model="ball.basketball" ng-ture-value="1"  ng-false-value="0">篮球<input type="checkbox" ng-model="ball.football" ng-true-value="1" ng-false-value="0">足球
    <div ng-if="ball.basketball==1">喜欢篮球的原因:<textarea style="height: 100px;width: 300px;"></textarea></div>
    <div ng-if="ball.football==1">喜欢足球的原因:<textarea style="height: 100px;width: 300px;"></textarea></div>
  </div>

    <div ng-app="angularJS1" ng-controller="ctrl">
      商城状态:<input type="radio" ng-model="status" value="1">打开<input type="radio" ng-model="status" value="0">关闭
      <textarea style="width: 300px;height: 200px;" ng-show="status==0">商城正在系统升级,给你带来不便,敬请谅解,1个月后再来访问吧</textarea>

    </div>

    <div ng-app="angularJS" ng-controller="ctrl">商品名称:{{data.title}},商品价格:{{data.price}},商品数量:<button ng-click="decrease()">-</button><input type="text" name="text" ng-model='data.num'><button ng-click="increase()">+</button>,商品总价:{{data.price*data.num}},数量:{{data.num}}
      <br>
      <input type="text" name="text" ng-model="name"><br>
      <input type="text" name="text" ng-model="name">
      <form>
        商品名称:<input type="text" name="text" ng-model="data.title">
        商品价格:<input type="text" name="text" ng-model="data.price">
        商品数量:<input type="text" name="text" ng-model="data.num">
        商品总价:<input type="text" name="text" ng-value="data.num*data.price">
      </form>

    </div>

<script>

    let m=angular.module('You',[]);
    m.controller('ctrl',['$scope',function($scope){
      $scope.title="The 1000phone education";
      $scope.isShow=true;
      $scope.toggle=function(){
        $scope.isShow=!$scope.isShow;
      }
      $scope.isDisabled=true;
      $scope.toggleDisabled=function(){
        $scope.isDisabled=!$scope.isDisabled;
      }

    }]);

    var m=angular.module('Repeat',[]);
    m.controller('ctrl',['$scope',function($scope){
      $scope.data=[{
              id:1,
              title:"this is first news",
              click:5
             },{
              id:2,
              title:"this is second news",
              click:15
             },{
              id:3,
              title:"this is third news",
              click:7
             },{
              id:4,
              title:"this is fourth news",
              click:89
       }];
      $scope.fn=function(){
        alert("Don't close me ! please...");
      }
    }]);

    let m=angular.module('Submit',[]);
    m.controller('ctrl',['$scope',function($scope){
      $scope.title="千疯教育";
      $scope.content="上海H51615班级第二阶段的学习快结束啦!";
      var oQianfeng=document.qianfeng;
      oQianfeng.onsubmit=function(){
        console.log(this.title.value.length);
        console.log($scope.title.length);
      };
    }]);

    var m=angular.module('Select',[])
    m.controller('ctrl',['$scope',function($scope){
      $scope.current="1";
        $scope.data=[{
              name:"刘德华",
              value:"1"
            },{
              name:"张学友",
              value:"2"
            },{
              name:"郭富城",
              value:"3"
            },{
              name:"黎明",
              value:"4"
        }];
    }])

    let m=angular.module('demo',[]);
    m.controller('ctrl',['$scope',function($scope){
      $scope.ball={football:0,basketball:0};
    }])

    var m=angular.module('angularJS1',[]);
    m.controller('ctrl', ['$scope', function ($scope) {
        $scope.status=1;
    }])

    //第一步创建模块,包括模块名字和一个空数组
    let m=angular.module('angularJS',[]);
    //第二步,创建一个控制器,包括控制器名字和一个数组,数组里包括视图(从后台获取数据的东西)名字和一个函数
    m.controller('ctrl',['$scope',function($scope){
      $scope.data={
        id:1,
        title:"苹果",
        price:18,
        num:1
      };
      $scope.decrease=function(){
        if($scope.data.num>0) $scope.data.num--;
      }
      $scope.increase=function(){
        $scope.data.num++;
      }
      $scope.name='京东商城';

    }])

</script>
</body>

</html>

    /*AngularJS指令及注释*/
    1,ng-bind;//ng-bind与表达式{{}}是同一种工具,都能将数据插入到页面中,当数据后面的字符串比较长时使用{{}},但是当使用表达式{{}},网速比较慢的时候页面会有{{}}闪退,解决办法是加class="ng-cloak",再在css中让其none".ng-cloak{display:none}"即可解决;注:不能用于form表单
    2,ng-cloak;
    3,ng-model;//其指令中的值发生变化以后,会及时更新到$scope中,$scope中的值发生变化以后,则重新解析页面中使用到该指令的值
    4,ng-value;//用于设置form表单或select中的value值,不会发生双向绑定
    5,ng-show;//原理是通过控制css样式确定元素是否显示
    6,ng-hide;
    7,ng-if;//控制元素是否显示,原理是将元素从DON节点中删除
    8,ng-disabled;//控制表单是否禁止使用
    9,ng-repeat;//按值索引,并非按下标索引,当数组中有重复的数据时,必须指定no-repeat='v in shops track by $index',否则报错;$index是ng自带的变量,表示当前数据的下标值
    10,ng-selected;//指定被选中的option标签元素,为true时表示选中当前标签
    11,ng-readonly/ng-disabled;//禁止用户修改表单元素,使用disabled属性的表单数据不能提交到后台,而使用readonly属性的表单数据是可以提交到后台的;
    12,ng-checked;//表示表单元素是否被选中
    13,ng-class/ng-class-odd/ng-class-even;//ng-class绑定angular数据,指令的值为Json对象,如果属性为true,则使用对应属性名的class样式;ng-class-odd/ng-class-even奇偶数行应用的类
    14,ng-style;//设置行级样式
    15,ng-click='';ng-change=''(必须指定ng-model,否则报错);ng-dblclick;ng-keydown;ng-keyup;ng-keypress;ng-mousedown;ng-mouseup;ng-mousemove;//事件处理指令,格式:ng-click="fn()(函数名)"
    16,ng-init;//不常用,执行给定的表达式
    17,ng-trim;//指令用来设置是否打开自动移除字符串两侧的空白字符;注:a:ng-model指令会自动移除文本框内容两侧的空白字符,而不会移除密码框内容两侧的空白字符,如不需要该功能,则设置ng-trim指令值为false;b:ng-model只会移除文本框内容帮定到$scope对象属性上的值的两侧空白字符,而文本框的value值还是会包含两侧的空白字符;
    18,ng-true-value;//用于设置复选框被选中时的值。
    19,ng-false-value;//指令用于设置复选框取消选中时的值,如果没有使用这两个指令设置,那么选中复选框时的值为true,取消选中时的值为false。
    20,ng-options;//指令用于构建select下拉列表,被选中的值需要存储到ng-model指令指定的变量中;

Angular.js之指令学习笔记的更多相关文章

  1. 关于Angular.js Routing 的学习笔记(实现单页应用)

    最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...

  2. Angular.js之Router学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  6. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  7. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  8. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  9. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

随机推荐

  1. UVa 336 - A Node Too Far

    题目大意:在计算机网络中,每条信息都有一个TTL值,在信息到达一个节点时,TTL值首先减1,如果TTL为0,则丢弃该信息报文.给一个网络的配置,给定源点和TTL值,判断该网络中有多少节点不可到达. 无 ...

  2. TF-IDF算法 笔记

    TF-IDF:Term Frequency-Inverse Document Frequency(词频-逆文档频度):主要用来估计一个词在一个文档中的重要程度. 符号说明: 文档集:D={d1,d2, ...

  3. iOS 之 微信开发流程

    第1阶段 注册开放平台帐号 注册成为微信开放平台开发者 立即注册 认证开发者资质 开发者资质认证通过后才可申请微信支付,申请审核服务费:300元/次 立即认证 创建APP并提交审核 提交你的APP基本 ...

  4. Core Data使用之一(Swift): 保存

    Core Data 用于永久化数据,它是基于SQLite数据库的保存一门技术. 那么,在Swift中,它是如何实现的呢? 首先,需要新建一个模板,打开工程中的xcdatamodeld文件,点击“Add ...

  5. 线程(thread)

    线程(thread): 现代操作系统引入进程概念,为了并发(行)任务 1.进程之间的这种切换代价很高 2.通信方式的代价也很大基本概念: 1.线程是比进程更小的资源单位,它是进程中的一个执行路线(分支 ...

  6. 浅谈tomcat的配置及数据库连接池的配置

    1.如何修改tomcat的端口 在某些情况下,可能需要修改tomcat监听的端口8080,比如: a.需要启动两份tomcat服务器 b.某个服务占用了8080端口(1433,1521,3306... ...

  7. 以脚本方式直接执行修改密码的passwd命令

    以脚本方式直接执行修改密码的passwd命令: 参考: http://bbs.csdn.net/topics/390001865 http://bbs.chinaunix.net/thread-993 ...

  8. PHP上传图片重命名6种方案

    一. 适用场景:无法使用从数据库中返回的自增长数字,给上传图片重命名.这是图片或文件上传的流程决定的.一般图片上传处理过程是,先上传图片到服务器,重命名之后,插入到数据库.也就是说,在数据库中非常容易 ...

  9. Chrome中java因过期而遭到阻止

    http://www.cnblogs.com/jifeng/p/3453322.html 在Chrome快捷方式图标上右击,选[属性],然后在[目标]一栏的末尾添加这么一段命令(flag): --al ...

  10. C# OpenFileDialog 使用

    OpenFileDialog ofd = new OpenFileDialog(); //设置标题 ofd.Title = "选择文件"; //是否保存上次打开文件的位置 ofd. ...