@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index5</title>

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

    <style>

        .red {

            background: red;

            color: blue;

        }

        .yellow {

            background: yellow;

        }

    </style>

</head>

<body>

    <div ng-app="myApp">

        <div ng-controller="firstController">

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

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

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

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

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

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

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

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

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

            <div ng-show="t">ng-show绑定变量不需要{{}}用的是display的操作</div>

            <div ng-if="t">ng-if是dom级的操作直接删除dom</div>

            <div ng-switch on="t">

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

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

                 </p>

                <p ng-switch-when="true">

                    切换的效果

                </p>

            </div>

            <div ng-switch on="selection">

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

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

                <div ng-switch-default>Default</div>

            </div>

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

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

                <summary>Show/Hide me</summary>

            </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.sStyle = "{color:'red',background:'yellow'}";

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

            $scope.src = "";

            $scope.t = true;

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

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

        });

    </script>

</body>

</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. Swift中的便利构造器和构造器链

    import UIKit // 1.一个类中至少有一个指定构造器, 其必须负责初始化类中所有的实例存储属性 // 2.便利构造器属于次要的, 辅助性的构造器 // 3.类中可以不定义便利构造器, 便利 ...

  2. C#构造函数使用

    作用:帮助我们初始化对像(给对像的每个属性依次的赋值) 构造函数是一个特殊的方法 1.构造函数没有返回值,连void也不能写 2.构造函数名称要和类名一样 3.创建对像时会执行构造函数 4.构造函数可 ...

  3. C++ Primer 5th 第4章 表达式

    表达式是运算对象及运算符组成的式子,表达式求值将得到一个结果,单独的变量或者字面值也算表达式,结果是其本身. 运算符分为:一元运算符.二元运算符.三元运算符.一元即一个作用对象,二元两个作用对象,以此 ...

  4. python学习第十五天 -面向对象之继承和多态

    大家都知道面向对象的三大特性:封装,继承,多态.封装特性在上一章节已经讲解过.这一章节主要讲解继承和多态. 继承: 当定义一个类的时候,可以从现有的类进行继承.那么新定义的类可以称为子类,被继承的现有 ...

  5. UCOS 内存管理理解 创建任务

    OS_MEM   *OSMemCreate (void *addr, INT32U nblks, INT32U blksize, INT8U *err)   { ................... ...

  6. 跨域Ajax请求 web.config文件配置

    在web.config文件的<system.webServer>节点下面添加如下配置代码:<!--允许跨域ajax访问--> <httpProtocol> < ...

  7. hdu 1385 Minimum Transport Cost

    http://acm.hdu.edu.cn/showproblem.php?pid=1385 #include <cstdio> #include <cstring> #inc ...

  8. Keil C调试经验

    我们使用Keil C调试某系统时积累的一些经验:     1.由于Keil C对中文支持不太好,因而会出现显示的光标与光标实际所在不一致的现象,这会对修改中文注释造成影响.在Windows2000下面 ...

  9. C# 二进制，十进制，十六进制

    //十进制转二进制 Console.WriteLine(Convert.ToString(69, 2)); //十进制转八进制 Console.WriteLine(Convert.ToString(6 ...

  10. zabbix 启用分区表后需要关闭Housekeeper

    <pre name="code" class="html">Zabbix Housekeeper changes: 使用分区表需要关闭zabbix的 ...