1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>Index5</title>
  11.     <script type="text/javascript" src="~/Scripts/angular.js"></script>
  12.     <style>
  13.         .red {
  14.             background: red;
  15.             color: blue;
  16.         }
  17.  
  18.         .yellow {
  19.             background: yellow;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div ng-app="myApp">
  25.         <div ng-controller="firstController">
  26.             <div ng-class="{red:s,yellow:true}" ng-cloak>{{text}}</div>
  27.             <div ng-class="{sClass}" ng-cloak>{{text}}</div>
  28.             <div ng-cloak ng-style="{color:'red'}"></div>
  29.             <div ng-cloak ng-style="{sStyle}"></div>
  30.             <a href="{{url}}">百度</a><br />
  31.             <a ng-href="{{url}}"></a><br />
  32.             <img src="{{src}}" /><br />
  33.             <img ng-src="{{src}}" /><br />
  34.             <a ng-href="{{url}}" title="百度" ng-attr-title="{{text}}"></a>
  35.  
  36.             <div ng-show="t">ng-show绑定变量不需要{{}}用的是display的操作</div>
  37.  
  38.             <div ng-if="t">ng-if是dom级的操作直接删除dom</div>
  39.  
  40.             <div ng-switch on="t">
  41.                 <p ng-switch-default>默认效果</p>
  42.                 <p ng-switch-when="false">切换的效果
  43.                  </p>
  44.                 <p ng-switch-when="true">
  45.                     切换的效果
  46.                 </p>
  47.             </div>
  48.             <div ng-switch on="selection">
  49.                 <div ng-switch-when="settings">Settings Div</div>
  50.                 <div ng-switch-when="home">Home Span</div>
  51.                 <div ng-switch-default>Default</div>
  52.             </div>
  53.             <input type="checkbox" ng-model="open"/>
  54.             <details id="details" ng-open="open">
  55.                 <summary>Show/Hide me</summary>
  56.             </details>
  57.  
  58.         </div>
  59.     </div>
  60.     <script type="text/javascript">
  61.         var app = angular.module("myApp", []);
  62.         app.controller("firstController", function ($scope) {
  63.             $scope.text = "PhoneGap中文网";
  64.             $scope.s = true;
  65.             $scope.sClass = "{red:true,yellow:true}";
  66.             $scope.sStyle = "{color:'red',background:'yellow'}";
  67.             $scope.url = 'htttp://www.baidu.com';
  68.             $scope.src = "";
  69.             $scope.t = true;
  70.             $scope.items = ['settings', 'home', 'other'];
  71.             $scope.selection = $scope.items[0];
  72.         });
  73.     </script>
  74. </body>
  75. </html>

　　

AngularJs练习Demo5的更多相关文章

  1. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  2. AngularJS的简单入门

    AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  3. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  4. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  5. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

  6. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  7. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  8. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  9. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

随机推荐

  1. ORACLE之SQL语句内部解析过程【weber出品】

    一.客户端通过监听连接到数据库,数据库开启一个server process进程来接收客户端传过来的sql. 1.这条sql语句从来都没有被执行过.(硬解析) 2.这条sql语句被执行过.(软解析) 二 ...

  2. SignalR2.0开发实例之——设置时间、后台其他地方使用集线器、使用自己的连接ID

    一.连接的生命周期设置: 如下: // 该值表示连接在超时之前保持打开状态的时间长度. //默认为110秒 GlobalHost.Configuration.ConnectionTimeout = T ...

  3. （原）torch的训练过程

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221622.html 参考网址: http://ju.outofmemory.cn/entry/284 ...

  4. android手电筒开发

    最近学习android开发,记录学习过程,分享一写小案例 一. 如下先设置好布局文件 <TextView android:id="@+id/textView1" androi ...

  5. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  6. 个性A标签

    问题: 前段时间,小琳同学问我A标签为啥alert出来的是它的href? 示例: 先来两个标签比较一下. <a id="a" href="http://www.ba ...

  7. QQ在线客服

    css代码: .float0831 { POSITION: fixed; TOP: 180px; RIGHT: 1px; _position: absolute } .float0831 A { CO ...

  8. iOS开发中的Html解析方法

    iOS开发中的Html解析方法 本文作者为大家介绍了在iOS开发中的Html解析方法,并同时提供了Demo代码的下载链接,Demo 解析了某个网站(具体可在代码中查看)的html网页,提取了图片以及标 ...

  9. ImageView显示不出来图片

    问题?? 用ImageView控件方法:public void setImageBitmap(Bitmap bm)来显示生成的bimap,结果在图片显示区域显示一片空白,而且其他控件颜色没变化,造成I ...

  10. ［转］Ubuntu Tweak 0.8.7 发布：支持 Ubuntu 14.04

    原文网址:http://www.oschina.net/news/51054/ubuntu-tweak-0-8-7 这是我开发 Ubuntu Tweak 七年以来第一次没在 Ubuntu 正式发布之前 ...