<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="angular.min.js"></script>

        <style>

            .red{ background:red; color:blue;}

            .yellow{ background:yellow;}

        </style>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="firstController">

               <div ng-cloak  ng-class="{red:s}">{{text}}</div>

               <div ng-cloak  ng-class="{{sClass}}">{{text}}</div>

              <div ng-cloak  ng-style="{color:'red'}">{{text}}</div>

              <div ng-cloak  ng-style="{{style}}">{{text}}</div>

              <a href="{{url}}">百度1</a>

              <a ng-href="{{url}}">百度</a>

              <img src="{{src}}" />

              <img ng-src="{{src}}" />

                <br>

              <br>

              <a ng-href="{{url}}" ng-attr-title="{{text}}">百度</a>

              <br>

              <br>

              <div ng-show="s">你好</div> //dispaly显示隐藏

              <br>

              <br>

              <div ng-if="s">你好</div> //dom的移除和没有移除

              <div ng-switch on="s">

                  <p ng-switch-default>默认的效果</p>

                  <p ng-switch-when="false">false切换的效果</p>

                  <p ng-switch-when="true">true切换的效果</p>

              </div>

              <br>

              <br>

              <div class="animate-switch-container"

                   ng-switch on="selection">

                  <div class="animate-switch" ng-switch-when="settings">Settings Div</div>

                  <div class="animate-switch" ng-switch-when="home">Home Span</div>

                  <div class="animate-switch" ng-switch-default>default</div>

              </div>

              <input type="checkbox" ng-model="open"><br/>

              <details id="details" ng-open="open">

                  <summary>Copyright 2011.</summary>

                  <p>All pages and graphics on this web site are the property of W3School.</p>

              </details>

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", []);

          app.controller('firstController',function($scope){

              $scope.text='phonegap中文网';

              $scope.s=true;

              $scope.sClass = "{red:true,yellow:true}";

              $scope.style = "{color:'red',background:'yellow'}";

              $scope.url='http://www.baidu.com';

              $scope.src='http://www.baidu.com/img/bdlogo.png';

//              $scope.style = "{color:'red',background:'yellow'}";

//              $scope.sClass = "{red:true,yellow:true}";

//              $scope.url = "http://www.baidu.com";

              $scope.items = ['settings', 'home', 'other'];

              $scope.selection = $scope.items[0];

          });

      </script>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="angular.min.js"></script>

        <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="firstController">

              <div ng-click="run()">点击</div>

              <div ng-bind="text"></div>

              //绑定多个

              <div ng-bind-template="{{text}} {{name}}"></div>

              //1.引入angular-sanitize，2.依赖['ngSanitize']

              <div ng-bind-html="text2"></div>

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", ['ngSanitize']);

          app.controller('firstController',function($scope){

                $scope.text='phonegap中文网';

                $scope.name='中文网';

                $scope.text2='<h2>这是h2</h2>';

                $scope.run=function(){

                  alert('run');

                  console.log('run');

                }

          });

      </script>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="../angular.min.js"></script>

        <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="firstController">

              <div ng-repeat="innerList in list" ng-init="outerIndex = $index">

                  <div ng-repeat="value in innerList" ng-init="innerIndex = $index">

                      <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>

                  </div>

              </div>

              <input type="text" ng-model="name" ng-model-options="{ updateOn: 'blur' }" />

              {{name}}

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", ['ngSanitize']);

          app.controller('firstController',function($scope){

               $scope.list = [['a', 'b'], ['c', 'd']];

          });

      </script>

    </body>

</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. jQuery hooks源码学习

    段落不够清晰,待整理 看jQuery源码的时候,经常见到含有hooks标志的对象,如cssHooks, attrHooks, propHooks, valHooks. 下面对其中的一段进行解读. jQ ...

  2. Gitlab 灾备措施

    Gitlab创建备份 使用Gitlab一键安装包安装Gitlab非常简单,同样的备份恢复与迁移也非常简单.使用一条命令即可创建完整的Gitlab备份: gitlab-rake    gitlab:ba ...

  3. 创建我们第一个Monad

    上一篇中介绍了如何使用amplified type, 如IEnumerable<T>,如果我们能找到组合amplified type函数的方法,就会更容易写出强大的程序. 我们已经说了很多 ...

  4. JavaScript中的工厂方法、构造函数与class

    JavaScript中的工厂方法.构造函数与class 本文转载自:众成翻译 译者:谢于中 链接:http://www.zcfy.cc/article/1129 原文:https://medium.c ...

  5. Kafka 分布式消息系统详解

    实际上kafka对机器的需求与Hadoop的类似. 原来,对于Linkin这样的互联网企业来说,用户和网站上产生的数据有三种: 需要实时响应的交易数据,用户提交一个表单,输入一段内容,这种数据最后是存 ...

  6. PostgreSQL的HA解决方案-项目概述

    公司使用的数据库时postgresql,一直运行都很流畅,但是最近java新做的管理平台,由于登录用户较多,并发性比较大.另外新系统可能优化也存在问题,所以pg经常崩溃,所以我就开始研究如何事项pg的 ...

  7. java控制台输入输出字符串

    一.实例说明 本实例通过输入流(System.in)实现从控制台接受用户输入信息,并将该信息输出到控制台. 运行效果如下图: 二.实现代码 三.要点说明 该实例的关键就是用到了System类的输入流, ...

  8. java线程入门知识

    为什么需要多线程? . 模型的简化,如某些程序是由多个相对独立任务的运行: . 图形界面的出现,输入.输出的阻塞 . 多核CPU的更好利用 . 异步行为的需要 Java多线程的特性: . 程序的入口m ...

  9. MySQL 5.7 安装过程中遇到的坑

    在安装的过程中遇到了几个坑,特地记录下来.启动的时候会有有个错误: 大意为mysql退出且更新不了pid文件. 查看error.log,如图: 大意为ibdtata1文件不够,初始化的时候页数太大.初 ...

  10. Maven安装和eclipse里面的配置

    一 . Maven简单介绍 Apache Maven是个项目管理和自动构建工具,基于项目对象模型(POM)的概念.       作用:完成项目的相关操作,如:编译,构建,单元测试,安装,网站生成和基于 ...