1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>无标题文档</title>
  6.         <script type="text/javascript" src="angular.min.js"></script>
  7.         <style>
  8.             .red{ background:red; color:blue;}
  9.             .yellow{ background:yellow;}
  10.         </style>
  11.     </head>
  12.     <body>
  13.       <div ng-app="myApp">
  14.           <div ng-controller="firstController">
  15.                <div ng-cloak  ng-class="{red:s}">{{text}}</div>
  16.                <div ng-cloak  ng-class="{{sClass}}">{{text}}</div>
  17.               <div ng-cloak  ng-style="{color:'red'}">{{text}}</div>
  18.               <div ng-cloak  ng-style="{{style}}">{{text}}</div>
  19.               <a href="{{url}}">百度1</a>
  20.               <a ng-href="{{url}}">百度</a>
  21.               <img src="{{src}}" />
  22.               <img ng-src="{{src}}" />
  23.                 <br>
  24.               <br>
  25.               <a ng-href="{{url}}" ng-attr-title="{{text}}">百度</a>
  26.               <br>
  27.               <br>
  28.               <div ng-show="s">你好</div> //dispaly显示隐藏
  29.               <br>
  30.               <br>
  31.               <div ng-if="s">你好</div> //dom的移除和没有移除
  32.               <div ng-switch on="s">
  33.                   <p ng-switch-default>默认的效果</p>
  34.                   <p ng-switch-when="false">false切换的效果</p>
  35.                   <p ng-switch-when="true">true切换的效果</p>
  36.               </div>
  37.               <br>
  38.               <br>
  39.               <div class="animate-switch-container"
  40.                    ng-switch on="selection">
  41.                   <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
  42.                   <div class="animate-switch" ng-switch-when="home">Home Span</div>
  43.                   <div class="animate-switch" ng-switch-default>default</div>
  44.               </div>
  45.               <input type="checkbox" ng-model="open"><br/>
  46.               <details id="details" ng-open="open">
  47.                   <summary>Copyright 2011.</summary>
  48.                   <p>All pages and graphics on this web site are the property of W3School.</p>
  49.               </details>
  50.           </div>
  51.       </div>
  52.       <script type="text/javascript">
  53.           var app = angular.module("myApp", []);
  54.           app.controller('firstController',function($scope){
  55.               $scope.text='phonegap中文网';
  56.               $scope.s=true;
  57.               $scope.sClass = "{red:true,yellow:true}";
  58.               $scope.style = "{color:'red',background:'yellow'}";
  59.               $scope.url='http://www.baidu.com';
  60.               $scope.src='http://www.baidu.com/img/bdlogo.png';
  61. //              $scope.style = "{color:'red',background:'yellow'}";
  62. //              $scope.sClass = "{red:true,yellow:true}";
  63. //              $scope.url = "http://www.baidu.com";
  64.               $scope.items = ['settings', 'home', 'other'];
  65.               $scope.selection = $scope.items[0];
  66.           });
  67.       </script>
  68.     </body>
  69. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>无标题文档</title>
  6.         <script type="text/javascript" src="angular.min.js"></script>
  7.         <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
  8.     </head>
  9.     <body>
  10.       <div ng-app="myApp">
  11.           <div ng-controller="firstController">
  12.               <div ng-click="run()">点击</div>
  13.               <div ng-bind="text"></div>
  14.               //绑定多个
  15.               <div ng-bind-template="{{text}} {{name}}"></div>
  16.               //1.引入angular-sanitize，2.依赖['ngSanitize']
  17.               <div ng-bind-html="text2"></div>
  18.           </div>
  19.       </div>
  20.       <script type="text/javascript">
  21.           var app = angular.module("myApp", ['ngSanitize']);
  22.           app.controller('firstController',function($scope){
  23.                 $scope.text='phonegap中文网';
  24.                 $scope.name='中文网';
  25.                 $scope.text2='<h2>这是h2</h2>';
  26.                 $scope.run=function(){
  27.                   alert('run');
  28.                   console.log('run');
  29.                 }
  30.           });
  31.       </script>
  32.     </body>
  33. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>无标题文档</title>
  6.         <script type="text/javascript" src="../angular.min.js"></script>
  7.         <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
  8.     </head>
  9.     <body>
  10.       <div ng-app="myApp">
  11.           <div ng-controller="firstController">
  12.               <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
  13.                   <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
  14.                       <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
  15.                   </div>
  16.               </div>
  17.               <input type="text" ng-model="name" ng-model-options="{ updateOn: 'blur' }" />
  18.               {{name}}
  19.           </div>
  20.       </div>
  21.       <script type="text/javascript">
  22.           var app = angular.module("myApp", ['ngSanitize']);
  23.           app.controller('firstController',function($scope){
  24.                $scope.list = [['a', 'b'], ['c', 'd']];
  25.           });
  26.       </script>
  27.     </body>
  28. </html>

angularjs1-5，class，的更多相关文章

  1. 逆天通用水印支持Winform，WPF，Web，WP，Win10。支持位置选择（9个位置 ==》[X]）

    常用技能:http://www.cnblogs.com/dunitian/p/4822808.html#skill 逆天博客:http://dnt.dkil.net 逆天通用水印扩展篇~新增剪贴板系列 ...

  2. MySQL主从环境下存储过程，函数，触发器，事件的复制情况

    下面,主要是验证在MySQL主从复制环境下,存储过程,函数,触发器,事件的复制情况,这些确实会让人混淆. 首先,创建一张测试表 mysql),age int); Query OK, rows affe ...

  3. Oracle安装部署，版本升级，应用补丁快速参考

    一.Oracle安装部署 1.1 单机环境 1.2 Oracle RAC环境 1.3 Oracle DataGuard环境 1.4 主机双机 1.5 客户端部署 二.Oracle版本升级 2.1 单机 ...

  4. Syscall，API，ABI

    系统调用(Syscall):Linux2.6之前是使用int0x80(中断)来实现系统调用的,在2.6之后的内核是使用sysentry/sysexit(32位机器)指令来实现的系统调用,这两条指令是C ...

  5. 【夯实PHP基础】PHP数组，字符串，对象等基础面面观

    本文地址 分享提纲 1.数组篇 2.字符创篇 3.函数篇 4.面向对象篇 5.其他篇 /*************************** 一.数组篇 Begin***************** ...

  6. MSSQL 事务，视图，索引，存储过程，触发器

    事务 事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行. 在数据库系统上执行并发操作时事务是作为最小的控制单元来使用的.这特别适用于多用户同时操作的数据 ...

  7. 谁偷了我的热更新？Mono，JIT，iOS

    前言 由于匹夫本人是做游戏开发工作的,所以平时也会加一些玩家的群.而一些困扰玩家的问题,同样也困扰着我们这些手机游戏开发者.这不最近匹夫看自己加的一些群,常常会有人问为啥这个游戏一更新就要重新下载,而 ...

  8. Atitit 知识管理的重要方法 数据来源，聚合，分类，备份，发布 搜索

    Atitit 知识管理的重要方法 数据来源,聚合,分类,备份,发布 搜索 1.1. Rss 简易信息聚合(也叫聚合内容 Really Simple Syndication1 1.1. Rss 简易信息 ...

  9. APP测试点总结(功能，交互，死机崩溃状态分析，容易出错的检查点）

    APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点) 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近涉足APP端测试,常见检查点总结如下:   一.业务方面: 1.  注册( ...

  10. 计算机人物系列-Mauchly，Eckert，Goldstine

    关键词:莫尔学院(Moore School),阿伯丁试验场(Aberdeen Proving Ground), 雷明顿兰德公司(Remington Rand Corporation), IBM院士(I ...

随机推荐

  1. linux 添加 msyql 开机自启动

    1.将服务文件拷贝到init.d下,并重命名为mysql cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysqld 2.赋予可 ...

  2. Android View事件分发与传递

    在Android中,人们主要通过手指与系统交互.Android把所有的touch事件都被封装成MotionEvent来进行处理,其中包括了手指点击的位置,时间等信息.其事件类型主要包括:ACTION_ ...

  3. 在无任何报错的情况下 pagehelper.startpage分页无效问题

    问题原因:自从spring boot开始使用2.0x版本以上后,很多相应的依赖文件版本开始变化 该版本为spring-boot 1.4.1 <dependency> <groupId ...

  4. todo reading

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind https ...

  5. 三维重建：深度相机方案对比-KinectFusion的基本原理（尺度）

    算法原理请参考此文:  kinect fusion 3D重建基本算法  http://log.csdn.net/xiaohu50/article/details/51592503 三维重建为三维空间实 ...

  6. Python爬虫3-----浏览器伪装

    1.浏览器伪装技术原理 当爬取CSDN博客时,会发现返回403,因为对方服务器会对爬虫进行屏蔽,故需伪装成浏览器才能爬取.浏览器伪装一般通过报头进行. 2.获取网页的报头 3.代码: import u ...

  7. [模板]Matrix Tree定理

    结论:一个图的生成树个数等于它的度数矩阵减邻接矩阵得到的矩阵(基尔霍夫矩阵)的任意一个n-1阶主子式的行列式的绝对值 证明:不会 求法:高斯消元 例题:[HEOI2013]小Z的房间 #include ...

  8. windows电脑配置耳机只有一个耳朵响

    也许你在工作,需要一个耳朵听同事的声音,一个耳朵听电脑的音乐,但是又不想另一个耳机头泄露声音,这样就有了想配置只有左/右单个耳机头会响的操作. 那么我们就开始配置吧,我这里以win10为例: 右击桌面 ...

  9. 配置sudo命令行为审计

    1.检查是否安装 rpm -aq sudo rsyslog #检验是否安装此软件 ***如果没有需执行(yum install sudo rsyslog -y)安装*** 2.配置审计 echo &q ...

  10. Django 中Admin站点的配置

    Admin站点是django提供的一个后台管理页面,可以用来对用户与数据库表数据进行管理. Admin站点配置流程 1.在settings.py文件中INSTALL_APPS列表中添加django.c ...